<!--
数组更新 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
});
}
},