前端用rules监听数组

设计思路-如何追踪变化

我们需要知道什么时候数组发生了变化，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函数中做一些其他的事，比如说发送变化通知。