Vue3 - computed and watch

📌 목차

• Introduction
• computed
• watchEffect
• watch
• Conclusion
• Reference

📌 Introduction

안녕하세요. 이번 포스팅에서는 computed와 watch에 대해 알아보겠습니다. 해당 코드는 여기서확인할 수 있습니다.

📌 computed

computed는 기존 vue 2에서의 computed와 같습니다. 다른 점은 immutable ref object를 반환합니다.

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(1);
    const plusOne = computed(() => count.value + 1);

    const onClick = () => {
      console.log('count', count.value); // 1
      console.log('plusOne', plusOne.value); // 2
    };

    return {
      onClick
    };
  }
};

get과 set으로 사용도 가능합니다.

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(1);

    const plustTwo = computed({
      get: () => count.value + 2,
      set: val => {
        count.value = val;
      }
    });

    const onClick = () => {
      console.log('count', count.value); // 1
      console.log('plusTwo', plustTwo.value); // 3;
      plustTwo.value = 0;
      console.log('plusTwo', plustTwo.value); // 2
    };

    return {
      onClick
    };
  }
};

📌 watchEffect

watchEffect는 reactive를 관찰하여 변경이 일어나면 내부의 함수를 실행 시킵니다.

import { watchEffect, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect(() => console.log(count.value)); // created 될때 log 0 ⭐️

    let timeout;
    const onClick = () => {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        count.value++; // console.log(1) by watchEffect ⭐️
      }, 1000);
    };

    return {
      onClick
    };
  }
};

📌 watch

watch는 기존 vue2에서의 watch와 같습니다. 그러나 reactive와 ref를 선언해주는게 조금 다릅니다.

reactive 일때:

import { watch, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });
    watch(
      () => state.count,
      (count, prevCount) => {
        console.log('count', count);
        console.log('prevCount', prevCount);
      }
    );

    const onClick = () => {
      state.count++; // count 1 prevCount 2 ⭐️
    };

    return {
      onClick
    };
  }
};

ref일때:

import { watch, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (count, prevCount) => {
      console.log('count', count);
      console.log('prevCount', prevCount);
    });

    const onClick = () => {
      count.value++; // count 1 prevCount 2
    };

    return {
      onClick
    };
  }
};

또한 다중으로 watch를 해줄수 도 있습니다.

import { watch, ref } from 'vue';

export default {
  setup() {
    const count1 = ref(0);
    const count2 = ref(0);

    watch([count1, count2], ([count1, count2], [prevCount1, prevCount2]) => {
      console.log('count1', count1);
      console.log('prevCount1', prevCount1);
      console.log('count2', count2);
      console.log('prevCount2', prevCount2);
    });

    const onClick = () => {
      count1.value++; // count1 1 prevCount1 2 count2 0 prevCount2 0
    };

    return {
      onClick
    };
  }
};

📌 Conclusion

computed와 watch는 reactive와 ref에 비해 어렵지는 않았던거 같습니다. 실제로 더 확인을 해봐야겠지만 다중으로 watch를 쓸지는 조금 의문이 듭니다. 그럼 다음 포스팅에서 만나요~~

📌 Reference

• Vue3 공식문서