Vue为什么不能检测到以元素赋值方式的数组变动

3,011 阅读2分钟

起源

研究Vue响应式原理时遇到一个问题,为什么Vue不能检测到以元素赋值方式的数组变动?

Vue的官方文档说:

由于 JavaScript 的限制,Vue 不能检测以下数组的变动:

  1. 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如:vm.items.length = newLength

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题,你可以使用 splice

vm.items.splice(newLength)

什么叫“由于 JavaScript 的限制”?这很困扰我,数组也是对象,就不能对数组的项也做劫持么?

思考

Vue的双向绑定是通过 Object.defineProperty 给对象添加 gettersetter 方法实现的。

var data = {
    name: 'Kikky',
    msg: 'hello'
}

// 枚举data里的属性并添加getter setter方法
Object.keys(data).forEach(function(key) {
    Object.defineProperty(data, key, {
        get: function() {
            console.log('trigger subscription')
        },
        set: function() { // 属性变动触发通知
            console.log('trigger notify')
        }
    })
})

data.msg = 'hello world' // 输出 trigger notify

对象可以,那么数组是否也可以呢?试一下

var array = ['a', 'b']

// 枚举数组各项,试图设置各项的getter,setter,
for (var i = 0, len = array.length; i < len ;i++) {
    // 数组的index就相当于对象的属性
    Object.defineProperty(array, i, {
        get: function() {
            console.log('trigger subscription')
        },
        set: function() { // 数组项变动触发通知
            console.log('trigger notify')
        }
    })
}

array[0] = 'x' // // 输出 trigger notify

事实证明,是可以通过 array[index] = newValue 这样的方式触发响应的。那Vue为什么不这样做呢?

试想一下,如果数组的长度不是2个,而是100, 1000,要是每个元素都这样设置一遍,是不是很笨拙,也很损耗性能?

不仅如此,由于JavaScript的数组是可变的,可以通过 array[index] = value 随时添加数组项,而Object.defineProperty是针对已有项的设置,新加的项是不会被 Object.definePropert设置的,也就不会触发响应了。对象可以没影响是因为我们在创建Vue实例的时候,data中的属性是预先定义好了的。

所以,所谓的“由于 JavaScript 的限制”,是因为动态添加的数组项不能被劫持而产生响应。

实际上,Vue对数组项的操作方法(pop, push, shifut, unshift, splice, sort, reverse)做了重写,这些方法可以改变数组,而不用管某一具体的数组项了,更加灵活。

总结

Vue不能检测到以元素赋值方式的数组变动是因为:

  1. 动态添加的数组项不能被劫持生成getter, setter,因此无法产生响应。
  2. 给数组每一项做劫持,性能低且笨拙。