Vue의 Watch와 WatchEffect 로 반응형 상태 감지 | 최초 즉시 실행 방법

Watch와 WatchEffect로 감시하자

반응형 상태 변경을 감지하여 다른 작업을 수행해야 하는 경우 활용한다.

 

 

👀 watch 함수

const message = ref('Hello World');
// message를 감시한다.
watch(message, (newValue, oldValue) => {
    console.log('newValue: ', newValue);
    console.log('oldValue: ', oldValue);
});

첫번째 매개변수는 newVaule, 두번째 매개변수는 oldValue가 온다.

newValue는 다양한 타입이 될 수 있다. (ref, reactive, computed, getter 함수, array 등)

 

 

👀 모든 중첩된 속성을 감지하는 watch 함수

const person = reactive({
    name: '테이',
    age: 30,
    hobby: '게임',
    obj: {
    	count: 0,
    },
});
watch(person, (newValue) => {
    // person 객체 모든 속성을 감지
    console.log('newValue: ', newValue);
});

반응형 객체를 직접 watch()하면 암시적으로 깊은 감시자가 생성되어 모든 중첩된 속성을 감지한다.

 

 

👀 원하는 객체의 값만 감지하는 watch 함수

watch(
    () => person.obj,
    (newValue) => {
        // person의 obj만 감지
        console.log('newValue: ', newValue);
    }
);

getter 함수를 활용하여 객체를 넘길 경우 원하는 객체의 값만 감지할 수 있다.

 

 

👀 최초에 즉시 실행하기

최초 즉시 실행 방법 1. immediate 옵션

watch(
    message,
    (newValue) => {
        // 어쩌구 로직
    },
    {
        // 컴포넌트가 생성될 때 해당 로직이 실행된다.
        immediate: true,
    }
);

immediate 옵션을 통해 데이터가 변경되기 전, 최초에 즉시 실행할 수 있다.

 

 

최초 즉시 실행 방법 2. 외부에 함수를 선언

const logic = () => {
	// 어쩌구 로직
};

watch(message, logic);

// 컴포넌트가 생성될 때 해당 로직이 실행된다.
logic();

함수를 외부에 선언하여 즉시 실행

 

 

👀 computed 와 watch

computed는 반응형 데이터의 종속 관계를 자동으로 세팅하고자 할 때 사용 (즉, 어떠한 값에 의해 다른 값이 결정 될 때!)

watch는 반응형 데이터의 변경 시점에 특정 액션을 취하고자 할 때 (call api, push router 등)

 

대체로 computed로 구현 가능하다면... computed로 구현하자

 

실제로 저도 vue를 배운지 얼마 안됐을 시기에 computed와 watch의 차이를 모르겠어서 computed로 할 수 있는 걸 모두 watch로 만들어서 나중에 싹 다 수정함 ^_^

 

 

👀 watchEffect 

watchEffect(async () => {
    const { data } = await axios.get(`어쩌구 api`);
    items.value = data.data;
});

콜백 함수 안의 반응형 데이터에 변화가 감지되면 자동으로 반응하여 실행한다. 그리고 watchEffect의 코드는 컴포넌트가 생성될 때 즉시 실행된다. (자동 즉시 실행)

 

 

 👀 watch와 watchEffect 비교

둘 다 api호출, push router 등 관련 작업을 반응하여 수행하게 해준다.

watch는 명시적으로 관찰된 소스만 추적한다. 콜백 내에서 엑세스한 항목은 추적 안함

watchEffect는 콜백함수 내에서 사용한 반응형 데이터만 감지. 더 편리하고 간결하지만 덜 명시적이다