[Vue] ref에는 왜 .value가 붙는걸까?

vue를 사용하면서 문득 왜 ref() 반응형을 사용할 때 왜 .value가 붙는지 궁금해졌다.

한 번 살펴보자

RefImpl

객체로 만든 값을 ref로 감싸서 콘솔창에 찍은 경우 위와 같이 나타낸다

RefImpl이 나오는데 무슨 말일까?

우선적으로 Vue.js 3에서 프록시 객체를 반응형 시스템에서 사용하기도 한다.

내부 데이터의 변경을 감지하고, 변경에 반응할 수 있게 프록시 객체를 사용하지만,

ref()의 경우,

🎈 RefImpl
1. 값을 추적하는 역할을 한다.
2. 원시 값이나 객체의 단일 값을 감싸며 추적 시 변경사항이 발생하면 반응할 수 있게 만들어준다.

그래서 원시 값을 감싸고 표현하기 위해서 vue 반응형 시스템에서 데이터를 관리할 때 .value, 즉 value 프로퍼티에 저장하고 사용하기 위해 설계된 것으로 보인다.

추가 내용

보통 template에서 ref를 바인딩할 때는 .value를 추가할 필요가 없다.

ref는 template 내에서 사용될 시 자동으로 언래핑되기 때문이다.

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

참고

Vue 공식문서