Vue 双向数据绑定原理(2/3)

• vue2 的原理

Object.defineProperty()

// 劫持了一层
   const data = {
      name: "zhang",
      age: 20
    }
    observer(data)
    function observer(target) {
      if (typeof target !== "object" || target === null) {
        return target
      }
      for (let key in target) {
        defineReactive(target, key, target[key])
      }
    }
    function defineReactive(target, key, obj) {
      Object.defineProperty(target, key, {
        get() {
          return value
        },
        set(newval) {
          value = newval;
          console.log("更新");
        }
      })
    }
    data.age = 10

// 对象
 const data = {
      name: "zhang",
      age: 20
    }
    observer(data)
    function observer(target) {
      if (typeof target !== "object" || target === null) {
        return target
      }
      for (let key in target) {
        defineReactive(target, key, target[key])
      }
    }
    function defineReactive(target, key, value) {
      // 劫持深层次的值 属性值为对象的情况
      observer(value)
      // 添加上一行代码
      Object.defineProperty(target, key, {
        get() {
          return value
        },
        set(newval) {
          value = newval;
          console.log("更新");
        }
      })
    }
    data.age = 10

 const data = {
      name: "zhang",
      age: 20
    }
    observer(data)
    function observer(target) {
      if (typeof target !== "object" || target === null) {
        return target
      }
      for (let key in target) {
        defineReactive(target, key, target[key])
      }
    }
    function defineReactive(target, key, value) {
      // 劫持深层次的值 属性值为对象的情况
      observer(value)
      // 添加上一行代码
      Object.defineProperty(target, key, {
        get() {
          return value
        },
        set(newval) {
          observer(newval)
          value = newval;
          console.log("更新");
        }
      })
    }
    // 删除时不响应
    delete data.age
    //  添加时不响应
    data.test = "someing"

• push pop 等方法不能响应式

  const data = {
      name: "zhang",
      age: 20,
      color: ["blue", "red"]
    }
    // 获取 原生array 对象的push等方法
    const oldArrayProto = Array.prototype;
    const newArrayProto = Object.create(oldArrayProto);

    ['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
      newArrayProto[methodName] = function () {
        console.log("更新");
        oldArrayProto[methodName].call(this, ...arguments);
      }
    })
    observer(data)
    function observer(target) {
      if (typeof target !== "object" || target === null) {
        return target;
      }
      // 添加判断
      if (Array.isArray(target)) {
        target.__proto__ = newArrayProto;
      }
      for (let key in target) {
        defineReactive(target, key, target[key]);
      }
    }
    function defineReactive(target, key, value) {
      // 劫持深层次的值 属性值为对象的情况
      observer(value);
      // 添加上一行代码
      Object.defineProperty(target, key, {
        get() {
          return value;
        },
        set(newval) {
          observer(newval);
          value = newval;
          console.log("更新");
        }
      })
    }
    data.color.push("green")

区别

• Object.defineProperty()

  • 是劫持对象的属性，对象属性的添加和删除，没有响应
  • 兼容低版本浏览器
  • 操作数组不响应

• Proxy

  • 是代理的整个对象，对对象属性的添加和删除都有响应
  • 不兼容低版本浏览器