vue须知（6）—— Vue数组响应式是怎么实现的呢？

在Vue中重写了数组那7个Api

• 找到数组原型
• 覆盖那些能够修改数组的更新方法， 使其可以通知更新
• 将得到的新的原型设置到数组实例原型上

大致思路如下

//1.替换数组原型中7个方法
const originalProto = Array.prototype;
//备份一份，修改备份
const arrayProto = Object.create(originalProto)[
  ("push", "pop", "shift", "unshift", "splice", "sort", "reverse")
].forEach((method) => {
  arrayProto[method] = function() {
    //原始操作
    const result = originalProto[method].apply(this, arguments);
    //覆盖操作：通知更新
    // console.log("数组执行" + method + "操作");
    // const ob = this.__ob__;
    // let inserted;
    // switch (method) {
    //   case "push":
    //   case "unshift":
    //     inserted = args;
    //     break;
    //   case "splice":
    //     inserted = args.slice(2);
    //     break;
    // }
    // if (inserted) ob.observeArray(inserted);
    // // 通知更新
    // ob.dep.notify();
    return result;
  };
});

function observe(obj) {
  if (typeof obj !== "object" || obj == null) {
    return;
  }

  if (Array.isArray(obj)) {
    //覆盖原型，替换7个变更操作
    obj.__proto__ = arrayProto;
    Object.keys(obj).forEach((key) => {
      observe(obj[key]);
    });
  } else {
    Object.keys(obj).forEach((key) => {
      defineReactive(obj, key, obj[key]);
    });
  }
}
function defineReactive(obj, key, val) {
  //递归
  observe(val)
  Object.defineProperty(obj,key,{
    get(){},
    set(){}
  })
}