Vue 반응성 Reactivity 데이터를 추적하는 방법 Proxy 객체

Vue에서 data 옵션을 이용해서 설정한 값은 바로 화면에 렌더링이 됩니다.

값을 변경하면 Vue는 변경을 감지하고,

Vue과 관리하는 HTML 코드를 스캔하여 변경사항이 있는 값을 다시 렌더링을 합니다.

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Superman',
    };
  },
});

Vue는 어떻게 변경을 감지할까요?

자바스크립트의 내장 기능인 Proxy 객체를 이용해서 변경을 감지합니다.

 

data 옵션으로 설정한 객체를 Proxy 객체로 래핑을 합니다.

Proxy로 래핑 한 객체는 내부적으로 data의 속성을 추적하고 있습니다.

name 값이 변경이 될 때마다, Vue는 바로 감지할 수 있습니다.

const data = {
    name: 'Superman',
    message: 'Hello!',
}

const handler = {
  set: function(target, key, value) {
    if (key === 'name') {
        target.message = 'Hello ' + value
    }
  }
}

const proxy = new Proxy(data, handler);
proxy.name = 'Batman';

console.log(proxy.message); // Hello! Batman

Vue는 프록시를 통해서 래핑 함으로써

데이터의 값이 변경이 발생했을 때, 추적할 수 있습니다.

 

실제 Vue는 더 복잡한 작동원리를 가지고 있지만, Vue의 기본 내부 작동 원리입니다.