[Vue3] computed/watch/watchEffect

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.

 

 Vue에서 리액티브한 데이터의 변경을 검지하여 어떠한 처리를 하고 싶을 때, computed나 watch, 혹은 watchEffect이라는 Composition API에서 제공하고 있는 편리한 기능을 이용할 수 있다. 

 그러나 "computed와 watch, 어느쪽을 써야 좋을까?"라던가, "watch랑 watchEffect의 경우는?"과 같이 망설이게 되는 순간이 온다. 이럴 때를 위해 어떤 것을 쓰는 것이 좋은지에 대해 조사한 내용을 이번 포스트를 통해 정리하고자한다.

 

 

작성법

---

각각의 기본 사용법에 대해서 살펴보자.

 

computed

<template>
    <input type="text" v-model="price">
    <p>2배의 금액：{{priceDoubleValue}}</p>
</template>

<script setup lang="ts">

const price = ref(0);

// 리액티브한 데이터（price.value）를 감시하여,
// 변경이 감지되면 priceDoubleValue하여 재평가하여 계산 결과를 반환
const priceDoubleValue = computed(() => {
    return price.value * 2;
})

</script>

watch

<template>
    <input type="text" v-model="price">
    <p>2배의 금액：{{priceDoubleValue}}</p>
</template>

<script setup lang="ts">

const price = ref(0);

const priceDoubleValue = computed(() => {
    return price.value * 2;
})

// priceDoubleValue을 감시하여 변경이 있다면 callback을 실행한다.
watch(priceDoubleValue, (newValue, oldValue) => {
    console.log(`${oldValue}에서${newValue}로 변경됐습니다`)
})

 

watchEffect

<template>
    <input type="text" v-model="price">
    <p>2배의 금액：{{priceDoubleValue}}</p>
    <button @click="stop">스탑</button>
</template>

<script setup lang="ts">

const price = ref(0);
const isStop = ref(false);

const priceDoubleValue = computed(() => {
    return price.value * 2;
})

// 변경된 리액티브한 데이터（isStop, priceDoubleValue）중 하나에
// 변경을 검지한 경웅 ㅔ처리가 실행된다.
watchEffect(() => {
    if (isStop.value) {
        console.log("스탑입니다！！！")
    } else {
        console.log(`${priceDoubleValue}이다.！`)
    }
})

const stop = () => {
    isStop.value = true;
}

 

 

computed or watch

---

 참고로 어디까지나 개인적인 의견으로 이렇게 구분해서 쓰면 좋을 것 같다.

 

computed

 변경을 감지하여....

•  데이터의 집계, 계산 등을 한 후에 계산 결과를 받아들인다.
• 필러링이나 정렬 등의 데이터 처리를 하여, 가공한 데이터를 받아들인다.
• 변경된 상태에 따라 다른 데이터나 상태를 받아들인다.

 변경에 따른 데이터를 획득할 경우에는 computed가 적당하다.

 

watch

 변경을 감지하여....

• 특정 데이터의 변경을 감시하여, 부작용을 실행하는 경우

 여기서 말하는 부작용은 데이터 변경이 있으면 자동으로 발생하는 처리를 말한다. 예를 들어, 변경을 검지하며 API에 리퀘스트를 송신하거나 DOM을 갱신하거나 혹은 다른 Vue 컴포넌트에 그 변경을 전달하는 등등.

 그리고 watch에서 작성한 return은 무시(=watch를 통해 데이터를 반환할 수 없음)하는 것도 computed와 다른 성질 중 하나이다.

 변경에 따라 데이터를 반환하는 것 이외의 처리를 실행하고자 하는 경우에 watch가 적합하다. 

 

 

watch or watchEffect

---

 사양면에서 다음과 같은 차이가 있다.

 watch에선 첫 번째 인수로 지정한 데이터의 변경을 검지하며 callback을 실행한다. watchEffect의 경우 첫 번째 인수로 지정한 callback에 내포된 모든 리액티브 데이터를 감시하고, 어느 하나라도 변경되면 callback을 실행한다. 

 watch에서는 callback 인수로 변경 전후의 데이터를 받을 수 있다는 점에서 구분해서 사용하게 된다.

 

watch

•  변경 전후의 값을 바탕으로 조건을 지정하여 처리를 실행하고 싶은 경우
• 감시 할 대상을 하나로 한정할 수 있는 경우

 감시 대상을 여러 개로 지정할 수 있지만, 복잡해진다는 염려가 있기 때문에 가능하면 하나로 한정하는 것이 좋을 것이다.

 

watchEffect

• watch로 해야할 이유가 없는 경우
• 감시 대상이 여러 개인 경우, 동시에 동일한 처리를 실행하고 싶은 경우

 위와 같은 경우 watch보다 코드가 심플해지므로 watchEffect를 쓰는 것을 추천한다. 

---

참고자료

https://zenn.dev/n4sh/articles/d51f505835d171