此部分内容官网讲的很清楚，再此做个笔记
摘自：https://cn.vuejs.org/v2/guide/list.html
Vue 包含一组观察数组的变异方法（会改变被这些方法调用的原始数组），
这些方法如下：
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
pop() 删除并返回数组的最后一个元素
shift()删除并返回数组的第一个元素
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
splice() 删除元素，并向数组添加新元素。
sort() 对数组的元素进行排序
reverse()颠倒数组中元素的顺序。
将会触发视图更新。
Vue包含一组观察数组的非变异方法（不会改变原始数组，但总是返回一个新数组），
这些方法如下：
filter() 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
concat()连接两个或更多的数组，并返回结果。
slice()从已有的数组中返回选定的元素。
当使用非变异方法时，可以用新数组替换旧数组，并不会重新渲染影响性能。
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
1、当你利用索引直接设置一个项时
vm.items[indexOfItem] = newValue
解决方法：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
因为数据层次太多，render函数没有自动更新，需手动强制刷新。添加this.$forceUpdate();进行强制渲染，效果实现。
2、当你修改数组的长度时
vm.items.length = newLength
``
解决方法：
vm.items.splice(newLength)
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除。
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
解决方法：
Vue.set(vm.userProfile, 'age', 27)
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
网友评论