Vue 2 & Vue 3 - Reactivity 차이점

 

아래의 소스코드는 위의 동작으로 실행된다.

이 과정은 Vue의 핵심이라고 할 수 있는데 개발자는

위의 과정에 맞춰서 개발을 한다고 보면 된다.

 

<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) {
      console.log('값 갱신')
      target[prop] = newValue;
      render(newValue);
    }
  })
</script>

 

기존에는 아래와 같이 Property 동작을 제어했다.

 

let data = {
    a : 10,
    b : 20
};
Object.defineProperty(data, 'a' {
    get() {
    },
    set() {
    }
});

 

여기서는 'a' 에 대한 것만 제어가 가능하게 설계가 되어있었는데

Vue 3에서는 Proxy를 통해 객체를 통짜로 모방하도록 만들 수 있어서

좀 더 개선된 버전이라고 할 수 있다.

 

API 차이로 인해서 Vue 2 보다 Vue 3가 사용하기 더 편하다고 할 수 있다.