vue3响应式原理

在 JavaScript 中有两种劫持 property 访问的方式：getter / setters 和 Proxies。Vue 2 使用 getter / setters 完全是出于支持旧版本浏览器的限制。而在 Vue 3 中则使用了 Proxy 来创建响应式对象，仅将 getter / setter 用于 ref。

实现

function ref(value) {
  const refObject = {
    get value() {
      // track(refObject, 'value');
      return value;
    },
    set value(newValue) {
      value = newValue;
      // trigger(refObject, 'value');
    }
  };
  return refObject;
};

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      // track(target, key);
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      // trigger(target, key);
    }
  });
};