[ Vue ] reactive

reactive()

reactive()는 객체 자체를 반응형으로 만든다.

 

reactive()의 반환 값은 원본 객체를 재정의한 프록시(proxy)이다.

const raw = {}
const proxy = reactive(raw)

// 반응형으로 재정의 된 것은 원본과 같지 않습니다.
console.log(proxy === raw) // false

 

원본 객체는 반응형이 아니고, 프록시만 반응형이기 때문에 객체를 Vue의 반응형 시스템으로 작업할 때는 상태를 재정의한 프록시만 사용하는 것이 가장 좋다.

 

프록시에 대한 일관된 접근이 보장된다.

// 객체를 reactive() 한 반환 값과 프록시는 동일합니다.
console.log(reactive(raw) === proxy) // true

// 프록시를 reactive()한 반환 값과 프록시는 동일합니다.
console.log(reactive(proxy) === proxy) // true

 

reactive()로 정의한 객체는 내부 깊숙이까지 반응형이므로, 반응형 객체 내부의 중첩된 객체도 프록시다.

const proxy = reactive({})

const raw = {}
proxy.nested = raw

console.log(proxy.nested === raw) // false

 

 

---

 

제한 사항

1. 제한된 값 유형

• 객체
• 배열
• Map
• Set

※ 원시 값은 사용 불가

 

2. 전체 객체를 대체할 수 없음

참조가 바뀌면 반응성 연결이 끊어지기 때문에 반응성 개체를 쉽게 대체할 수 없다.

 

3. 분해 할당에 친화적이지 않음

const state = reactive({
  count: 0,
})

// count는 분해 할당 될 때 state.count에서 연결이 끊어집니다.
let { count } = state

const plusCount = async () => {
  count++
  console.log(count)        // 1 2 3
  console.log(state.count)  // 0 0 0
}

reactive 객체의 원시 타입 속성을 지역 변수로 분해하거나, 그 속성을 함수에 전달할 때, 반응성 연결이 끊어진다.

 

 

공식 문서에서는 이러한 제한으로 인해 ref() 사용을 권장한다.

➡ 원시 값, 단순 객체는 ref(), 복잡한 중첩 객체나 배열은 reactive()를 사용하는 것으로 정리할 수 있겠다.