composition API에서 ref, reactive를 사용하는 방법

Vue의 Composition API에서는 기존의 data()를 this로 접근하는 방식 대신,

ref와 reactive로 접근하는 것으로 변경됐습니다.

거두절미하고, ref, reactive를 사용하는 방식은 다음과 같습니다

 

정확한 내용은 아니며, 사용할 때 얻었던 경험을 미루어 말씀드립니다.

 

참고링크입니다.

https://v3.ko.vuejs.org/api/refs-api.html#toref

Refs | Vue.js

// ref는 초기화할 내용이 객체가 아닌 경우에 주로 사용합니다.
const title = ref('this is title')

// -----------------------------------

// reactive는 초기화할 내용이 객체일 경우에 주로 사용합니다.
const userInfo = reactive({
	email: 'test@test.com',
	uid: ''
})

// 이의 value를 얻기 위해서는
const { email } = toRefs(userInfo);
console.log(email) // 'test@test.com'