vue 여러개의 값을 동시에 watch 하는 방법

여러 프로퍼티를 한 번에 watch 하는 방법

 

아래와 같은 코드가 있다. car와 coffee 값이 변하면 동일한 doSomething 함수를 호출한다. 여러 개를 watch 해야 하는 상황에서 모든 프로퍼티마다 watch를 선언하지 않고 한 번에 하는 방법이 있다.

 

watch: {
    car: function (val, oldVal) {
      doSomething();
    },
    coffee: function (val, oldVal) {
      doSomething();
    },
    // .. so on
}

 

Vue 3

Vue 3에서는 아래처럼 할 수 있다.

import { watch, ref } from 'vue';

export default {
  setup(() => {
    const car = ref('car'), coffee = ref('coffe');

    watch([car, coffee], ([newA, newB], [prevA, prevB]) => {
      doSomething();
    });
  });
};

 

Vue 2

Vue 2에서는 아래처럼 $watch instance를 사용하여 구현할 수 있다.

this.$watch(vm => [vm.car, vm.coffe].join(), val => {
  doSomething();
})

 

만약 위 방법이 새로운 배열을 만들기 때문에 성능에 문제를 초래할 수 있다고 생각되면 아래처럼 하면된다.

this.$watch(
    (vm) => (vm.car, vm.coffe, Date.now()),
    function () {
    	doSomething();
    }
)