composition API에서는 왜 setup에서 .value로 접근해야 할까?

createApp(){
	setup(){
    	const message = ref('hi');
        
        const changeMessge = () => {
        	message.value = 'hello';
        }
        
        return { message }
    }
}

 

ref가 없다는 가정하에 'hi'만 message로 초기화 할 경우 'hi'가 바뀐 것을 추적하려면 proxy같은 것이 필요하다.

 

https://dev0hoon.tistory.com/404

Vue 3 Reactivity - Proxy 소개

 

애초에 vue를 사용할 때 자연스레 reactivity를 사용하고 있어서 못느끼겠지만 사실 내부에서는 값이 바뀔 때마다 set(), get()을 해준다고 봐야한다. 그걸 ref() 함수로 대체했다는 것이 이해하기 좋다.

 

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#why-refs

Vue.js

 

vue.js3 공식 문서의 설명

const num = 0; x

const num = {
	value : 0,
    get() {
    },
    set() {
    }
}

위와 같은 모양이라고 보면된다.