[vue] ref, reactive 반응형

vue의 반응형을 구현하는데 쓰인 ref와 reactive의 핵심은 "사용된 모든 함수를 기억해뒀다가, 값이 바뀌면 모두 찾아가서 적용한다." 이다. computed 안에서 ref를 담은 변수를 사용하면, ref의 값이 변경되었을 때, computed를 변경한다(마찬가지로, computed를 사용한 함수도 추적해서 모두 변경한다.). 

 

예를들면,

<script setup>
const fruit = ref('apple');

function toBanana() {
  fruit.value = 'banana'
}

watch(fruit, (newFruit, oldFruit) => {
    console.log(`${oldFruit} to ${newFruit}`);
  }
)

const buyFruit = computed(() => {
  console.log('computed')
  return `buy ${fruit.value}`
});
</script>
<template>
  <div>
    {{ fruit }}
    {{ buyFruit }}
    <button @onclick="toBanana">toBanana</button>
  </div>
</template>

// =버튼 누르기 전=
apple
buy apple

// =버튼 누른 후=
banana
buy banana
(console) apple to banana
(console) computed

 

computed나 watch의 콜백함수를 ref나 reactive같은 반응형에 걸어 놓을 수 있다. computed는 콜백함수 안에서 사용하면 반응형을 추적해서 걸어 놓고, watch는 첫번째 파라미터로 사용해서 걸 수 있다.