Vue响应式原理实现总结（数据劫持Object.defineProperty/Proxy+发布订阅者设计模式）

Vue的响应式主要分为数据劫持和发布订阅模式。Vue2用的是Object.defineProperty，而Vue3改用Proxy。数据劫持就是在访问或修改对象属性时进行拦截，然后触发相应的更新。发布订阅模式则是用来收集依赖（比如视图更新函数），当数据变化时通知这些依赖执行。
总结一下，关键点包括：

1. 使用Object.defineProperty或Proxy进行数据劫持。
2. 在getter中收集依赖（Watcher到Dep）。
3. 在setter中触发Dep的通知，执行所有Watcher的更新。
4. 发布订阅模式通过Dep和Watcher实现依赖管理。

相关知识

数据劫持实现

以下是关于 Object.defineProperty() 和 Proxy 的详细介绍和对比：

---

一、Object.defineProperty()

1. 核心功能

• 定义：JavaScript 原生方法，用于直接在对象上定义新属性，或修改现有属性。
• 核心能力：通过 getter 和 setter 拦截属性的读写操作。
• 兼容性：ES5+，支持所有现代浏览器及 IE9+。

2. 基本语法

Object.defineProperty(obj, prop, {
   
  get() {
    /* 读取属性时触发 */ },
  set(newVal) {
    /* 修改属性时触发 */ },
  enumerable: true, // 可枚举
  configurable: true // 可配置（如删除）
});

3. 典型用途

const data = {
    count: 0 };

// 劫持属性
Object.defineProperty(data, "count", {
   
  get() {
   
    console.log("读取 count");
    return this._count; // 使用临时变量存储值
  },
  set(newVal) {
   
    console.log("修改 count");
    this._count = newVal;
  }
});

data.count = 1; // 输出 "修改 count"
console.log(data.count); // 输出 "读取 count" → 1

4. 局限性

场景	问题描述
新增属性	无法劫持未预先定义的属性
数组索引修改	直接通过索引修改元素无法触发监听
数组方法（push等）	需重写数组方法才能劫持
深层对象	需递归遍历所有属性，性能较差

---

二、Proxy

1. 核心功能

• 定义：ES6 新增的元编程特性，用于创建一个对象的代理，拦截并自定义对象的基本操作。
• 核心能力：拦截 13 种对象操作（如读写属性、删除属性、方法调用等）。
• 兼容性：ES6+，不支持 IE11 及更低版本。

2. 基本语法

const proxy = new Proxy(target, {
   
  get(target, prop) {
    /* 拦截属性读取 */ },
  set(target, prop, value) {
    /* 拦截属性修改 */ },
  // 其他拦截器：deleteProperty、has、ownKeys 等
});

3. 典型用途

const data = {
    count: 0 };

const proxy = new Proxy(data, {
   
  get(target, prop) {
   
    console.log(`读取 ${
     prop}`);
    return Reflect.get(target, prop);
  },
  set(target, prop, value) {
   
    console.log(`修改 ${
     prop} 为 ${
     value}`);
    return Reflect.set(target, prop, value);
  }
});

proxy.co