vue3 watch 사용법, vue3 watch 여러개, vue3 watchEffect 사용법

vue3 watch, watchEffect란?

Vue3에서는 watch와 watchEffect라는 두 가지 반응형 속성 감시자를 사용하여 데이터 변경을 감지하고 반응할 수 있습니다.
주로 데이터의 변화에 따른 부수적인 효과를 처리하는 데 사용됩니다.

vue3 watch 사용법

watch는 특정 반응형 속성이나 계산된 속성을 감시하며, 이들의 값이 변경될 때마다 콜백 함수를 호출합니다.

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    }
  }
}
</script>

위의 예제에서는 count 데이터의 변화를 감시하고 있으며, count 값이 변경될 때마다 콘솔에 메시지를 출력하게 됩니다.

vue3 watchEffect 사용법

watchEffect는 watch와 유사하지만,
콜백 함수 내부에서 접근하는 모든 반응형 속성을 자동으로 추적하여,
이들 중 어떤 것이든 변경될 때마다 콜백 함수를 호출합니다.

<script>
export default {
  data() {
    return {
      count: 0,
      multiplier: 2
    }
  },
  setup() {
    watchEffect(() => {
      console.log(`Result: ${this.count * this.multiplier}`)
    })
  }
}
</script>

위의 예제에서는 count와 multiplier 데이터에 접근하고 있으므로,
이들 중 어느 것이든 변경될 때마다 콘솔에 결과를 출력하게 됩니다.

watch와 watchEffect의 차이점

watch와 watchEffect의 주요 차이점은 watch는 명시적으로 지정된 속성만 감시하는 반면,
watchEffect는 콜백 함수 내에서 접근하는 모든 반응형 속성을 자동으로 감시한다는 점입니다.
따라서 watchEffect를 사용하면 코드가 더 간결해지고, 의존성 추적을 수동으로 관리할 필요가 없어집니다.

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

vue3에서 여러 개의 변수를 watch 해야 하는 상황에서,
각 변수마다 watch를 선언하지 않고 한 번에 하는 방법은 아래와 같이 watch에 array를 parameter로 넘겨주면 됩니다.

<script>
import { watch, ref } from 'vue';

export default {
  setup(() => {
    const data1 = ref('data1');
    const data2 = ref('data2');

    watch([data1, dat2], ([newA, newB], [prevA, prevB]) => {
      doSomething();
    });
  });
};
</script>

watch와 watchEffect를 option api 와 composition API 혼합해서 사용하는 예제 코드

<template>
  <p>{{ count_o }}</p>
  <button @click="count_o++">Options API 카운트 증가</button>
  <p>{{ count_c_1 }}</p>
  <button @click="count_c_1++">Composition API 1st 카운트 증가</button>
  <p>{{ count_c_2 }}</p>
  <button @click="count_c_2++">Composition API 2nd 카운트 증가</button>
  <p>상태: {{ state }}</p>
  <button @click="onStop()">watchEffect 중지</button>
</template>

<script>
import { ref, watch, watchEffect } from 'vue'

export default {
  //Options API
  data() {
    return {
      count_o: 0,
    }
  },
  watch: {
    count_o: (cur, prev) => {
      console.log('Options API Watch : ' + prev + ' ==> ' + cur)
    },
  },
  // Composition API
  setup() {
    const count_c_1 = ref(0)
    const count_c_2 = ref(0)
    const state = ref('실행 중')

    watch(
      count_c_1,
      (cur, prev) => {
        console.log('Composition API Watch : ' + prev + ' ==> ' + cur)
      },
      {
        immediate: true,
      }
    )

    watch([count_c_1, count_c_2], (cur, prev) => {
      console.log('Composition API Multiple Watch : ' + prev + ' ==> ' + cur)
    })

    const stop = watchEffect(
      () => {
        console.log('Composition API watchEffect Called ' + count_c_2.value)
      },
      {
        flush: 'post',
      }
    )

    const onStop = () => {
      state.value = '중지'
      stop()
    }

    return {
      count_c_1,
      count_c_2,
      state,
      onStop,
    }
  },
}
</script>