[Vue3] watch 사용법(props 변경 감지하기)

 

 

props 변경을 감지해서 함수를 실행시키고 싶었다.

즉, 'propData' 가 변경되면 testFunc 함수를 실행시키고 싶었는데,

생각대로 동작하지 않아서 어떻게 수정해야하는지 원인이 무엇인지 기록하자!

 

 

# 해결방법

 # 1. 변경 전 코드(동작 x)

import { ref, watch } from 'vue';

const props = defineProps(['propData']); // props 정의

// watch(감시할 변수, (새로운 변수)=> {변경사항 있는 경우 실행되는 코드 })
watch(props.propData, (newVal) => {
   testFunc(newVal);
});

let testFunc = (param) => {
	console.log(param)
}

 

# 2. 변경 후 코드(동작 o)

import { ref, watch } from 'vue';

const props = defineProps(['propData']); // props 정의


// watch(()=> {return 감시할 변수}, (새로운 변수)=> {변경사항 있는 경우 실행되는 코드})
watch(
  () => {
    return props.propData;
  },
  (newVal) => {
    testFunc(newVal);
  },
);

let testFunc = (param) => {
	console.log(param)
}

 

 

 

 

# 문제 원인

 

"#1. 변경 전 코드"로 작성했던 이유는

반응형 데이터 ref를 감시할 땐,

아래와 같이 사용해도 잘 동작됐기 때문이다.

// 반응형 데이터 ref 사용시(동작 O)

let length = ref(0)

watch(length, (newVal) => {
  testFunc(newVal);
});

let testFunc = (param) => {
	console.log(param)
}

 

 

그러나 watch는 반응형 데이터 ref와 reactive에 따라 사용법이 다르다.

공식문서에도 위 처럼 반응형 객체(reactive)의 속성을

ref 처럼 감시한다면 감시할 수 없다고 나와있다. 

 

 

https://ko.vuejs.org/guide/essentials/watchers

Vue.js