vue - watch

watch사용시에 유의해야할 점.

1. 값참조

 

const obj = reactive({ count: 0 })

// 이것은 작동하지 않습니다. watch()에 숫자를 전달하고 있기 때문입니다.
watch(obj.count, (count) => {
  console.log(`Count는: ${count}입니다`)
})

// getter를 사용해야한다.
watch(
  () => obj.count,
  (count) => {
    console.log(`Count는: ${count}입니다`)
  }
)

 

2. 깊은감시

 

state.someObject.nestedProperty = 'another value'; 로 바꿀시에는,  깊은감시로 참조를 할 수 있고, 

얕은 감시에는 state.someObject = { nestedProperty: 'new value' }; 를 사용해야 감시할 수 있다.

 

한단계 아래까지만 사용을 하고 있어서, 깊게 감시할 수 없다. 

 

<script setup>
import { onMounted, ref, watch, reactive } from 'vue'

const state = reactive({
  someObject: {
    nestedProperty: 'value'
  }
});

// 기본 watch: 객체 자체가 교체될 때만 반응
watch(
  () => state.someObject,
  (newValue, oldValue) => {
    console.log('기본 watch:', newValue, oldValue);
  }
);

// deep watch: 객체의 모든 속성 변화를 감지
watch(
  () => state.someObject,
  (newValue, oldValue) => {
    console.log('deep watch:', newValue, oldValue);
  },
  { deep: true }
);

// 테스트 변화



const test = ()=>{
 // 기본 watch와 deep watch 모두 감지
state.someObject.nestedProperty = 'another value';
}
</script>

<template>
  
  <div>
    <div disabled value="">깊음감시공부하기</div>
    <div @click="test">가</div>

  </div>
</template>

 

 

3. immediate 옵션과 함께 사용할때와, 아닐때 차이는?

 

setTimeout을 걸어봤을때, count를 변경시키면 count가 변경될때만 변경이된다.

즉 초기값 설정시 호출 되지 않는다.

 

하지만 immediate: true 속성을 넣는다면, 최초에 mount될때 내부의 코드가 동작한다.

첫 번째 경우:
2초 후에만 로그가 출력됩니다: Watch without immediate: 1 0
두 번째 경우:
컴포넌트가 마운트되자마자 로그가 출력됩니다: Watch with immediate: 0 undefined
2초 후에 다시 로그가 출력됩니다: Watch with immediate: 1 0

 

 

4. once감시자.

 

단 한번만 감시하고 이후부터는 감시하지않는다.

useEffect의 [상태] + [] 와 비슷한것같다.

 

5. watchEffect

immediate: true를 사용하지않고서 즉시 실행할수있게만들어준것?

차이점을 보는것이 중요하다.

 

종속성을 명시적으로 지정할 필요없고, immdeditate기능이 탑재되어있다.

하지만 의도하지않은 반응성상태까지 추적이된다.