📚 Reference

• 공식 문서 1

📜 Chapter

shallowRef()

ref, reactive

Proxy

shallowReactive()

• shallowReactive
• shallowReactive()
• Vue.js의 shallowReactive는 이름 그대로 '얕은(Shallow)' 방식의 반응성을 제공하는 함수이다.
• 일반적인 reactive가 객체의 모든 중첩된 속성까지 뒤져서 반응형으로 만드는 것과 달리, 딱 첫 번째 수준(Root level)의 속성만 반응형으로 만든다.
• 쉽게 말해, 겉껍질은 반응형이지만 속 알맹이는 일반 객체 그대로 두는 방식이다.

reactive, shallowReactive 차이점

• 두 함수의 가장 큰 차이는 중첩된 객체를 처리하는 방식에 있다.

예제

• 예시 1

  import { reactive, shallowReactive, watchEffect } from 'vue';
  
  const state = shallowReactive({
    count: 0,
    nested: {
      bar: 10
    }
  });
  
  // 1. 최상위 속성 변경 (반응함!)
  state.count++; // UI가 업데이트되고 관련 효과가 실행됩니다.
  
  // 2. 중첩된 속성 변경 (반응 안 함!)
  state.nested.bar = 20; 
  // 실제 값은 20으로 바뀌지만, Vue는 이 변화를 감지하지 못합니다. 
  // 따라서 UI 업데이트가 일어나지 않습니다.