前言
最近在尝试用Vue.js重构公司的现有业务代码，组件化的设计思路和MVVM的思想让我深深沉迷于其中。但是是踩到了不少坑，就比如这篇文章介绍的数组绑定后的更新检测。
相信大家都知道
Observer，
Watcher，
vm 可谓 Vue 中比较重要的部分，检测数据变动后视图更新的重要环节。在 vue.js中$watch的用法示例 中，我们讨论了如何实现基本的 watch 。接下来，我们来看看如何实现数组变动检测。
例子:
// 创建 vm
let vm = new Vue({
data: {
a: [{}, {}, {}] }
})// 键路径
vm.$watch('a', function () {
// 做点什么
})
思路
在 js 中， 很容易实现 hook， 比如：
// hook 一个 console。log
let _log = console.log
console.log = function (data) {
// do someting
_log.call(this, data)
}我们只要实现自定义的函数，就能观测到数组变动。
Vue.js 中使用
Object.create() 这个函数来实现继承, 从而实现自定义函数，以观测数组。
// 简单介绍
var a = new Object(); // 创建一个对象，没有父类var b = Object.create(a.prototype); // b 继承了a的原型
继承
array.js定义如下：
// 获取原型
const arrayProto = Array.prototype
// 创建新原型对象
export const arrayMethods = Object.create(arrayProto)
// 给新原型实现这些函数
[
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
].forEach(function (method) {
// 获取新原型函数 （此时未实现 undefined）
const original = arrayProto[method] // 给新原型添加函数实现
Object.defineProperty(arrayMethods, method, {
value: function mutator() {
let i = arguments.length
// 获取参数
const args = new Array(i)
while (i--) {
args[i] = arguments[i] }
// 实现函数
const result = original.apply(this, args)
// 获取观察者
const ob = this.__ob__
// 是否更改数组本身
let inserted
switch (method) {
case 'push':
inserted = args
break
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
// 观察新数组
inserted && ob.observeArray(inserted)
// 触发更新
ob.dep.notify()
return result
},
enumerable: true,
