[vue3] computed, watchEffect, Watch 사용법

● computed 사용법

App.vue

    <h4>count: {{count}}</h4>

    <h4>doubleCount Computed: {{doubleCountComputed}}</h4>

    <h4>doubleCount Method: {{doubleCountMethod()}}</h4>

    <button @click="count++">Add one</button>

 

 // 숫자세기

    const count = ref(1)

    const doubleCountComputed = computed(() => {

      return count.value * 2

    })

    const doubleCountMethod = () => {

      return count.value * 2

    }

 

차이점

1.

- doubleCountMethod 는 매개변수를 전달할 수 있으나,

computed는 매개변수 전달이 불가능 하다.

- computed 는 state 값(count.value)이 변경되어야만 computed 값이 계산된다.

 

2.

computed 는 값을 기억하고 있음.

그래서,

    <h4>doubleCount Computed: {{doubleCountComputed}}</h4>

    <h4>doubleCount Computed: {{doubleCountComputed}}</h4>

    <h4>doubleCount Method: {{doubleCountMethod()}}</h4>

    <h4>doubleCount Method: {{doubleCountMethod()}}</h4>

이렇게 두번씩 실행하게 될경우,

 

이렇게 computed는 한번 method는 두번이 실행됨.

 

● WatchEffect 사용법

state 값이 변경될 경우 실시간으로 확인 할 수 있다.

그리고 reative,ref 인 상태 값들로만 변경이 가능하고

let limit = 5;

   

    watchEffect(() => {

      console.log(limit)

    })

 limit = 3;

limit를 3으로 변경하게 될 경우,

console.log(limit)의 값은 5이다.

왜냐하면 reactive, ref 인 상태 값이 아니기 때문임..

 

 

● Watch 사용법

- single source

  watch(currentPage, (cur, prev) => {

      console.log(cur, prev)

    })

 

currentpage 의 값이 변경될 경우

실시간으로 체크하기 cur 은 현재 값이고

prev는 이전 값이다.

 const a = reactive({

      b: 1

    })

   

    watch(() => a.b, (curr, prev) => {

      console.log(curr, prev)

    })

    a.b = 2;

 

값은 2,1 이 찍힌다.

 

- multi source 

watch([currentPage, numberOfTodos], (curr, prev) => {

      console.log(curr, prev)

    })

 

여러개의 값이 실시간으로 변경될 경우 []을 사용하여

찾는다.