vue.js是如何实现对Array数组的监听

设计思路-如何追踪变化

我们需要知道什么时候数组发生了变化，Array原型中可以改变数组自身内容的方法有7个，分别是push、pop、shift、unshift、splice、sort和reverse。
那么我们是不是就可以认为，当要触发上述方法是就代表的数组要发生变化了，但是由于ES6 之前js没有提供元编程的能力，也没有去拦截原始方法的函数，所以我们可以用自定义的方法去覆盖原生的原型方法。

用一个拦截器覆盖Array.prototype。之后，每当使用Array原型上的方法操作数组时，其实执行的都是拦截器中提供的方法，比如push方法。然后，在拦截器中使用原生Array的原型方法去操作数组。

这是一个简单的实现思路–内容取自《深入浅出vue.js》

• 在上面的代码中，我们创建了变量arrayMethods，它继承自Array.prototype，具备其所有功能。未来，我们要使用arrayMethods去覆盖Array.prototype。
• 接下来，在arrayMethods上使用Object.defineProperty方法将那些可以改变数组自身内容的方法（push、pop、shift、unshift、splice、sort和reverse）进行封装。
• 所以，当使用push方法的时候，其实调用的是arrayMethods.push，而arrayMethods.push是函数mutator，也就是说，实际上执行的是mutator函数。
• 最后，在mutator中执行original（它是原生Array.prototype上的方法，例如Array.prototype.push）来做它应该做的事，比如push的功能。
  因此，我们就可以在mutator函数中做一些其他的事，比如说发送变化通知。

总结

本文内容均取自《深入浅出vue.js》就看了几章就感觉解决了很多困惑，比看网上写的各种文章来说讲的够透彻，我这里只取了如何检测数组变化，后续还有什么收集依赖什么的，如何把这个监听挂载到数组中等等
这块就是汽车发动机，没轮子它也没用，有轮子没他车也跑不了，没事多看看书吧，就一两个小时的功夫，你就会发现新大陆