ref와 reactive

Vue.js에서 반응형 상태를 선언하는 방식은 ref(), reactive() 두 가지가 있다.

 

ref()는 스크립트 영역에서 .value 속성으로 변수에 접근하며, 템플릿 영역 안에서 사용하는 경우에는 해당 속성으로 접근할 필요는 없다. String, Number와 같은 Primitive type과 Array, Map 등 Object type 전부 반응형 상태로 선언 가능하다. 깊은 반응형을 가지고 있기 때문에 Non-primitive type인 경우 reactive()를 통해 반응형 프록시로 변환되기 때문이다.

 

ref()와 다르게 reactive()는 객체 자체를 반응형으로 만들며, 스크립트 영역에서 .value를 사용할 필요가 없고 객체 자체에 직접 접근하여 사용하면 된다. 또한 Object type만 반응형 상태로 선언할 수 있다.