[Vue3] reactive fundamental

vue3 에는 ref 라는 함수를 제공하며 반응형 객체를 반환한다.

reactive 라는 함수가 있다.

마찬가지로 반응형 객체를 반환하지만 ref와는 다른 점이 존재한다.

매개변수로 primitive 객체가 아닌 Object 혹은 Array 객체를 받는다

<script setup>
const state = reactive({count: 0});
const count = ref(0);
const increaseCount = () => {
  state.count++;
}
const increaseCountRef = () => {
  count.value++; 
}
</script>

<template>
<p>Reqctive Count = {{ state.count }}</p>
<button @click="increaseCountRef">Increase Count</button>
<hr />
<p>Ref Count = {{ count }}</p>
<button @click="increaseCount">Increase Count</button>

</template>

 

ref 함수로 생성된 반응형 객체와의 차이점은 script 영역내에서 직접 속성 접근이 가능하다는 점.

ref 함수로 생성된 객체는 counrt.value , 즉 .value 를 통해 접근해야하나 reactive 를 통해 생성된 객체는 해당 속성을 바로 접근할수 있다.

 

reactive 와 ref 의 가장 큰 차이

첫 번째, reacitve 는 primitive 데이터를 매개변수로 사용할수 없다.

export declare function reactive<T extends object>(target: T): UnwrapNestedRefs<T>;

primitive 데이터는 ref 를 이용해서 반응형 객체로 선언한다.

 

두 번째 다른 객체로 변경 불가하다

let state = reactive({count: 0});
const increase = () => {
  state = {
    count: state.count++
  };
}

 

위 코드처럼 state.count 를 직접 변경하지 않고 다른 객체로 참조하게 할 경우 반응형 객체가 되지 않는다.(당연하겠지만)