Vue3 | 반응형 API

반응형 상태 선언하기 | reactive(), ref()

• reactive(): JavaScript 객체에서 반응형 상태를 생성하기 위해
• ref(): 기본타입(number, string, boolean)을 반응형으로 만들고자 할 때

반응형 상태 구조 분해하기 | toRef(), toRefs()

큰 반응형 객체의 몇몇 속성을 사용하길 원할 때, 원하는 속성을 얻기 위해 ES6 구조 분해 할당을 사용할 수 있다.

import { reactive } from 'vue'

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: '당신은 이 책을 지금 바로 읽습니다 ;)',
  price: '무료'
})

let { author, title } = book

그러나 구조 분해로 두 속성은 반응형을 잃게 된다. 이런 경우, 반응형 객체를 일련의 ref 들로 변환해야한다. 이러한 ref 들은 소스 객체에 대한 반응형 연결을 유지한다.

toRefs, toRef를 사용하면 반응형 객체의 속성과 동기화된다. 그래서 원본 속성을 변경하면 ref 객체가 업데이트되고 그 반대의 경우도 마찬가지이다.

import { reactive, toRefs } from 'vue'

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: '당신은 지금 바로 이 책을 읽습니다  ;)',
  price: '무료'
})

let { author, title } = toRefs(book)

title.value = 'Vue 3 상세 Guide' // title 이 ref 이므로 .value 를 사용해야함
console.log(book.title) // 'Vue 3 Detailed Guide' 출력

readonly()를 이용하여 반응형 객체의 변경 방지