vue3 ref와 reactive 사용법과 차이점

• Options API는 data, methods, mounted 와 같은 옵션을 사용. (vue3 이전 버전)
• Composition API는 반응형 코드를 작성하는 단일 setup 함수가 있음. (vue3)

composition api는 vue 컴포넌트를 작성할 수 있는 api세트이다. 

그 중 ref와 reactive는 컴포넌트와 별개로 사용할 수 있는 반응형 데이터를 생성할 수 있다. 

 

ref는 premity type(string, number, object) 어떠한 타입도 사용할 수 있고,

reactive는 object, array, map, set과 같은 타입에서만 사용할 수 있다. 

 

객체를 선언할때 둘 다 사용할 수 있는데, ref를 사용하면 객체를 한꺼번에 객체 할당할 수 있다.

반대로 reactive를 사용하게 되면 주소값이 아예 바뀌기 때문에 사용할 수 없게 된다. 

reactive는 vue2에서 사용하던  data()와 비슷하다고 볼 수 있다. 

 

ex)
const form = ref({}) 
// let form = reactive({}) 

const fetchData = () => {
 ...
 form.value = {...data}
}

 

https://markus.oberlehner.net/blog/vue-3-composition-api-ref-vs-reactive/