Vue.js 中的数组变动检测

原文链接 ： http://www.jianshu.com/p/a4f63ed809d2

Vue.js 中的数组变动检测

源码请戳

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,
    writable: true,
    configurable: true
  })
})

ok， 我们定义完了 array.js, 并作为模块导出，修改 Observer的实现：

export function Observer (value) {
  this.dep = new Dep()
  this.value = value
    
  // 如果是数组就更改其原型指向
  if (Array.isArray(value)) {
    value.__proto__ = arrayMethods
    this.observeArray(value)
  } else {
    this.walk(value)
  }
}

// 观测数据元素
Observer.prototype.observeArray = function (items) {
  for (let i = 0, l = items.length; i < l; i++) {
    observe(items[i])
  }
}

Observer修改完毕后，我们再看看 Watcher， 只需要改动其 update函数，

Watcher.prototype.update = function (dep) {
  console.log('2.update')
  const value = this.get()
  const oldValue = this.value
  this.value = value
  if (value !== this.value || value !== null) {
    this.cb.call(this.vm, value, oldValue)
    // 如果没有此函数， 会导致重复调用 $watch 回调函数。
    // 原因：数组变异过了，并对新数组也进行了观察，应该移除旧的观察者
    dep.subs.shift()
  }
}

结果：

const vm = new Vue({
  data: {
    b: [{a: 'a'}, {b: 'b'}]
  }
})

vm.$watch('b', (val) => {
  console.log('------我看到你们了-----')
})

vm.b.push({c: 'c'})
vm.b.pop({c: 'c'})
vm.b.push({c: 'c'})

// 结果：
// console.log('------我看到你们了-----')
// console.log('------我看到你们了-----')
// console.log('------我看到你们了-----')

源码请戳

总结

至此，我们已经实现对数组变动的检测。主要使用了Object.create()函数。不足之处欢迎指正。