Vue：array的变化侦测

CSDN话题挑战赛第2期
参赛话题：学习笔记

学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?
你可以从以下几个方面着手（不强制），或者根据自己对话题主题的理解创作，参考如下：

由于array不能向对象那样拦截getter和setter对数据进行侦测，但是可以拦截Array.prototype，使用自定义数组api覆盖Array.prototype的api。从而实现对数组变化侦测。

接下来，实现array的拦截器。首先找出能够改变数组自身的数组api，分别为：push、pop、shift、unshift、splice、sort、reverse，然后使用自定义函数覆盖。

先把数组原本的原型缓存起来，然后创建一个继承原本的原型的对象，在该对象上定义与数组api同名的api

const arrayProto = Array.prototype;
const arrMethods = Object.create(arrayProto);
['push','pop','shift','unshift','splice','sort','reverse'].forEach(method => {
  const originalMethod = arrayProto[method];
  Object.defineProperty(arrMethods, method, {
    configurable:true,
    enumerable:true,
    writable:true,
    value:function (...args){
      return originalMethod.call(this, ...args);
    }
  });
});

接下来开始覆盖数组的原型，在原来侦听对象变化的基础上添加对数组数据变化的侦测即可。

class Observer {
  constructor(value) {
    this.value = value;
    if (Array.isArray(value)) {
      value.__proto__ = arrayMethods;
    } else {
      this.walk(value);
    }
  }
  walk(data) {
    let keys = Object.keys(data);
    for (let i = 0; i < keys.length; i++) {
      defineReactive(data, keys[i], data[keys[i]]);
    }
  }
}

function defineReactive(data, key, val) {
  if (typeof val === 'object') {
    new Observer(val);
  }
  let dep = new Dep();
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    set(newVal) {
      if (val === newVal) {
        return;
      }
      val = newVal;
      dep.notify();
    },
    get() {
      dep.dependSub();
      return val;
    }
  });
}