Vue2/3中的响应式原理

vue2.x的响应式

• 实现原理：

  • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
  • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

    Object.defineProperty(data, 'count', {
        get () {}, 
        set () {}
    })
    

• 存在问题：

  • 新增属性、删除属性, 界面不会更新。
  • 直接通过下标修改数组, 界面不会自动更新。

Vue3.0的响应式

• 实现原理:

  • 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

  • 通过Reflect（反射）: 对源对象的属性进行操作。

  • MDN文档中描述的Proxy与Reflect：

    • Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
    • Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

    // 创建一个新的Proxy以拦截对象上的操作
    const proxy = new Proxy(data, { // "Proxy" 创建了一个包装 `data` 的新对象，允许自定义处理特定的操作
    
        // 拦截读取属性值
        get(target, prop) { // `target` 是原始对象 (`data`)，`prop` 是被访问的属性名称
            return Reflect.get(target, prop) // `Reflect.get` 安全地从 `target` 中获取 `prop` 的值
        },
    
        // 拦截设置属性值或添加新属性
        set(target, prop, value) { // `prop` 是要设置的属性，`value` 是要分配的值
            return Reflect.set(target, prop, value) // `Reflect.set` 安全地将 `value` 设置到 `target` 的 `prop` 上
        },
    
        // 拦截删除属性
        deleteProperty(target, prop) { // `prop` 是要删除的属性
            return Reflect.deleteProperty(target, prop) // `Reflect.deleteProperty` 安全地从 `target` 中删除 `prop`
        }
    });
    
    // 在Proxy对象上设置属性
    proxy.name = 'tom'; // 这一行设置了 Proxy 的 `name` 属性（同时也设置了 `data` 的 `name`）