watch와 watchEffect의 차이

watch

• 활용 시기: 특정 데이터가 변경되었을 때 실행.

• 데이터 비교: 새로운 데이터와 이전 데이터를 가져옴 (lazy).

• 활용 상황:

  • 특정 반응 속성을 관찰하거나, 이전 값에 관심이 있는 경우 사용.

  • 함수 또는 하나 이상의 반응 속성을 감시할 수 있음.

• 실행 조건: reactive 종속성이 변경될 때만 실행됨

watch(user, () => doSomething({ user: user.value, profile: profile.value }))
// user의 변경을 감시하고 이전값 변경값을 확인가능

2024/1/15

※ immediate: boolean

watch는 데이터가 변경될때마다 동작한다.

그러나 화면 초기 동작시 watch가 동작해서 변경하지 않으면 안되는 데이터가 있다

그런 경우 immediate사용

( 화면 초기화시 watch를 사용하고싶을 경우에 immediate사용 )

watchEffect

• 활용 시기: 의존성이 있는 데이터에 대해서 즉각적으로 실행 (immediately).

• 데이터 비교: 단순화된 버전으로, 새로운 값만을 감지함.

• 활용 상황:

  • 여러 반응 속성을 감시하고, 이전 값에 신경을 쓰지 않을 때 사용.

  • computed hook과 유사하게 동작.

• 실행 조건: 정의되거나 reactive된 종속성이 변경될 때 즉시 동작.

const num = ref(1);
const name = ref('hong');

watchEffect(() => {
  console.log(num.value);
  console.log(name.value); 
  // 해당 함수안에있는 반응형 속성을 감시하고 변화가있을때 동작함
});

일반적인 사용 시나리오:

• watch: 특정 데이터의 변화를 주의깊게 감시하고, 이전 값과의 비교가 필요한 경우에 사용.

• watchEffect: 여러 반응 속성 중 하나라도 업데이트가 발생하면 즉시 동작하며, 이전 값에 신경쓰지 않아도 되는 간단한 감시에 사용.

한줄요약

watch

1.하나의 특정 값만 감시

2.변경전 변경후 값을 확인할때

watchEffect

1.여러 값들을 동시에 감시

2.단순하게 현재 값만 확인할때

참조

watch, watchEffect의 차이점

https://goodteacher.tistory.com/542