Vue2와 Vue3 Reactivity

vue 공식 문서의 이미지

vue3, vue2의 Reactivity의 차이점에 대해 정리해 보고자 한다.

 

Vue 3 Reactivity - Proxy

<div id="app">
  <!-- 여기에 뭐가 렌더링 된다. -->
</div>

<script>
  var data = {
    message: 10,
    num: 20,
  }

  function render(sth) {
    var div = document.querySelector('#app');
    div.innerHTML = sth;
  }

  var app = new Proxy(data, {
    get() {
      console.log('값 접근')
    },
    set(target, prop, newValue) { // 파라미터는 API문서에서 확인 가능
      console.log('값 갱신')
      target[prop] = newValue;
      render(newValue);
    }
  })
</script>

vue3 에서 반응형을 어떻게 구현하고 있는가에 대한 코드이다.

 

Proxy라는 객체를 생성하여,

첫번째 파라미터에 대상을, 두번째 파라미터에 객체를 지정하여,

get(),과 set()을 구현 하고 있다.

 

vue2와는 달리 객체를 통체로 모방을 하기 때문에 속성을 개별로 지정하지 않아도 된다.

 

vue2 Reactivity - Object.defineProperty()

 

Object.defineProperty()는 각 속성에 대해 개별로 지정해야 하는 단점이 있었고

미리 정의 되지 않는 속성에 대해선 reactiviy가 적용되지 않았다.

const object1 = {
  a: 10,
  b: 20
};

Object.defineProperty(object1, 'a', {
  value: 11,
  writable: false,
});

Object.defineProperty(object1, 'b', {
  value: 22,
  writable: false,
});