Vue : watch 속성

TestData의 값이 바뀌는걸 감지해서 함수를 실행시키려고 했다.

watch(testData, updateData);

결론적으로는 testData.value로 watch하느냐 testData로 watch를 하느냐는 달랐고 {deep:true} 속성을 사용하여 객체의 내부 속성이 변경되는것을 감지한다.

---

testData 테스트

▼RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: {…}, _value: Proxy(Object)}
	▶dep : Set(1) {ReactiveEffect}
		__v_isRef : true
		__v_isShallow : false
	▶_rawValue : {dep1: '🟢변하는 값🟢', dep2: '', dep3: ''}
	▶_value : Proxy(Object) {dep1: '🟢변하는 값🟢', dep2: '', dep3: ''}
	▼value : Proxy(Object)
		▶[[Handler]] : MutableReactiveHandler
		▼[[Target]] : Object
			dep1 : "🟢변하는 값🟢"
			dep2 : ""
			dep3 : ""
			▶[[Prototype]] : Object
			[[IsRevoked]] : false
    ▶[[Prototype]] : Object

testData를 감시하면 testData를 객체 자체의 변경을 감시하게 된다. 즉, testData가 다른 객체로 대체되는 경우에만 콜백 함수가 호출된다. 그래서 {deep:true} 를 사용하여 내부 속성이 변경되는지를 확인한다.

해결

watch(testData, updateData, { deep: true });

---

TestData.value 테스트

▼Proxy(Object) {dep1: '🟢변하는 값🟢', dep2: '', dep3: ''}
	▶[[Handler]] : MutableReactiveHandler
	▼[[Target]] : Object
		dep1 : "🟢변하는 값🟢"
		dep2 : ""
		dep3 : ""
      ▶[[Prototype]] : Object
      [[IsRevoked]] : false

반면에 testData.value를 감시하면 testData 객체의 value 속성의 변경을 감시하게 된다. 즉, testData.value의 값이 변경되는 경우에 콜백 함수가 호출된다.

deep 옵션은 객체의 내부 속성 변경까지 감시할 것인지를 결정한다. deep: true로 설정하면, 객체의 내부 속성이 변경되는 경우에도 콜백 함수가 호출된다.

따라서 testData를 watch하면서 deep: true 옵션을 사용하면, testData.value 내의 속성(dep1, dep2, dep3)이 변경되는 경우에도 콜백 함수가 호출된다.

이렇게 설정하면 testData.value.dep1, testData.value.dep2, testData.value.dep3 중 어느 것이 변경되더라도 updateData 함수가 호출된다.

해결

watch(testData.value, updateData);

---