[Vue3] Composition API를 활용한 watch 기능

현재 프로젝트에서 Vue3를 사용하고 있다.

다음에 또 활용할 수 있게 watch 기능에 대해서 작성한다.

환경은 node.js, Vue3, setup, Composition API를 사용한다

아래와 같이 foo의 값의 변경이 일어날 때 변경될 값 newValue의 값을 활용할 수 있다.

단일 ref

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

const foo = ref('')

watch (foo, (newValue) => {
  console.log(`foo값: ${newValue}`)
})
</script>

getter

나의 경우 부모 컴포넌트의 값을 자식 컴포넌트로 전달할 일이 있어
watch로 props를 감지하도록 활용했다.

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

const props = defineProps({
  termData: {
    cycleNumber: 3,
    cycleName: '개월',
  },
})

watch (
  () => props.termData,
  (termData) => {
    if (termData) {
      console.log(`${termData.cycleNumber} ${termData.cycleName}`) 
    }
  }
)
</script>

출처 : https://ko.vuejs.org/guide/essentials/watchers.html#basic-example