<!--
数组更新 7种 会改变原始数组的方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
Vue检测到数据变化会更新视图
不会改变原数组方法,可以使用新数组替代原数组
数组变化时,并不是直接渲染,而是最大的复用DOM元素,
替换数组的相同元素不会被重新渲染。无需担心性能问题.
filter()
slice()
concat()
Vue不能检测到
1,通过索引直接设置项
app.list[3] = {};
2, 修改数组长度
app.list.length = 1
Vue.set(this.list, index, item);
过滤与排序
不想改变原数组,通过一个数组的副本做过滤或者排序、
可以使用计算属性来返回过滤或排序后的数组
-->
<ol>
<li v-for="(item,index) in computedList" :key="index">{{item.name}}-{{item.age}}</li>
</ol>
<button @click="setList">Vue.Set</button>
</div>
methods: {
setList() {
// this.list[2] = { name: "zhangsan2", age: 30 };
this.$set(this.list, 2, {
name: "lisi",
age: 30
});
}
},