ref(), reactive() 차이점

1. ref()는 proxy 객체로 래핑 한다. → 접근은 value를 통해서 내부로 접근해야 가능하다.

2. reactive()는 이름 그대로 객체를 proxy 객체로 래핑 한다. → 접근은 이름 그대로 접근할 수 있다.

ref()

• ref() 에서는 String, Number, Boolean등등 어떤 타입이든 사용이 가능하다. (원시 타입이 가능)

• ref() 에서는 .value를 붙여야만 접근할 수 있다.
• 다만 template 안에서는 자동으로 언래핑 되기에 value를 사용하지 않아도 된다.

reactive()

• reactive() 에서는 Object, Array, Mapp, Set, Function 등과 같은 타입 원시 타입이 아닌 것만 사용이 가능합니다.

• reactive() 는 .value를 붙이지 않은 그 상태 그대로 접근이 가능하다.

• reactive() 는 String, Number의 즉 원시 타입의 값을 초기에 지정해서 사용할 경우 원시값에 대해서는 반응형을 가지지 않는다.

ref()의 reactive() 차이점

1. 타입
1. ref() 원시형 가능 reactive() 원시형 불가능

2. Object일 경우 ref()는 재 할당 할 경우 반응형을 유지한다. 하지만 reactive()는 재 할당하면 반응형을 잃어버린다.

<template>
    <h3>ref()와 reactive()의 차이점</h3>
    <p class="mt-5">
        {{ refObj }} <br>
        {{ reactiveObj }}
    </p>
    <p class="mt-5">두개가 같아 보이지만 console.log()를 확인하면 <br> proxy 객체가 아닌 것을 확인할 수 있다.</p>
</template>

<script setup>
import { ref, reactive } from 'vue';

let refObj = ref({});
let reactiveObj = reactive({});


const newData = {name: 'proxy 객체일까?'};

refObj.value = {...newData};
reactiveObj = {...newData};

console.log(refObj, 'ref를 사용한 재할당');
console.log(reactiveObj, 'reactiveObj를 사용한 재할당');
</script>