Vue 响应式原理详解：从发布订阅到 Proxy 实现

结合实现响应式

将上述两者结合，我们可以模拟一个简化的响应式流程。设计一个函数接收数据对象、目标元素标识、数据键名和选择器。每次调用时，先订阅视图更新事件，再劫持数据属性。当数据被修改时，触发发布，进而更新视图。

let dataHi = function({ data, tag, dataKey, selector }) {
  let value = '', el = document.querySelector(selector);
  Object.defineProperty(data, dataKey, {
    get() {
      return value;
    },
    set(val) {
      value = val;
      Dep.trigger(tag, val);
    }
  });
  Dep.listen(tag, function(text) {
    el.innerText = text;
  });
};

在实际使用中，初始化数据时会触发 get 收集依赖，更新数据时触发 set 通知依赖。这样便完成了数据联动和视图更新。

Vue 3 响应式原理

Vue 3 彻底改变了响应式实现方式，不再使用 Object.defineProperty，而是采用了 Proxy。

Proxy 可以拦截目标对象的读取、赋值等操作。它不直接操作对象，而是通过代理对象进行，从而能添加额外的处理逻辑。一个 Proxy 实例由 target（目标对象）和 handler（行为声明）组成。

const target = { name: 'sheldon', age: 10 };
let proxy = new Proxy(target, {
  get(target, key) {
    return target[key];
  },
  set(target, key, value) {
    console.log(`修改了${key}`);
    target[key] = value;
  }
});

console.log(proxy.name);
proxy.age = 26;

相比 Vue 2，Vue 3 的 Proxy 方案能更好地处理数组索引变更、动态新增属性等场景，且性能更优。