[JavaScript知识库]Vue响应式的不足

Vue响应式的不足

1. 无法检测数组/对象的新增
2. 无法检测通过索引改变数组的操作（操作arr[index] / arr.length）

为什么可以看一下源码，这篇文章: https://www.cnblogs.com/youhong/p/12173354.html

Object.defineProperty其实是可以实现监听数组的变化，但是为了性能考虑Vue2没有实现。

如何解决Vue响应式的不足问题呢？

对象

1. Vue.set(object, propertyName, value)添加新属性
2. 使用Object.assign() 或 _.extend()修改整个对象，和第3点相同。

this.obj = Object.assign({}, this.obj, { a: 1, b: 2 })

3. 直接修改整个对象，添加属性与原来对象进行合并。

data (){
    return {
        obj : {
            exit : "已有的属性"
        }
    }
}
// 操作
this.obj = {
    ...this.obj,
    add : "添加的属性"
}

4. 或者预留一个属性设置为null，使用时在进行赋值。

数组

1. vm.$set(vm.items, indexOfItem, newValue)
2. vm.items.splice(newLength)使用Vue实现响应式包含的数组方法。

Vue实现响应的数组方法有push、pop、shift、unshift、splice、sort、reverve

3. 也可以使用filter、concat、slice返回的数组直接替换掉原数组。