Reactivity

Vue에서 data의 변화를 계속 추적할 수 있는 이유는 Proxy 때문이다.

엑셀을 예로 들어보자

A1 혹은 A2의 값을 바꿈에 따라서 A3의 값은 계속 바뀌는 것을 알 수 있다.

 

이러한 원리는 Vue에서도 비슷하게 적용된다.

이것을 Reactivity라고 한다.

따라서, Vue의 원리를 묻는다면 Proxy를 활용한 Reactivity 특징을 보인다라고 하면 될 거 같다.

 

Proxy 사용법

const data = {
  name: "Luis"
};

const observedData = new Proxy(data, {
  set(target, key, value) {
    target[key] = value;
  }
});

observedData.name = "John";
console.log(observedData.name);