vue2.x的响应式

  • 实现原理：

    • 对象类型：通过Object.defineProperty()对属性的读取、批改进行拦挡（数据劫持）。

    • 数组类型：通过重写更新数组的一系列办法来实现拦挡。（对数组的变更办法进行了包裹）。

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

  • 存在问题：

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

Vue3.0的响应式

  • 实现原理:

    • 通过Proxy（代理）: 拦挡对象中任意属性的变动, 包含：属性值的读写、属性的增加、属性的删除等。
    • 通过Reflect（反射）: 对源对象的属性进行操作。

    • MDN文档中形容的Proxy与Reflect：

      • Proxy：https://developer.mozilla.org...

      • Reflect：https://developer.mozilla.org...

        new Proxy(data, {    // 拦挡读取属性值    get (target, prop) {        return Reflect.get(target, prop)    },    // 拦挡设置属性值或增加新属性    set (target, prop, value) {        return Reflect.set(target, prop, value)    },    // 拦挡删除属性    deleteProperty (target, prop) {        return Reflect.deleteProperty(target, prop)    }})proxy.name = 'tom'