vue打卡－数组的数据响应变化

• 更改原数组的值
  push(),pop(),shift(),unshift(),splice(),sort(),reverse()，会改变数组并更新视图

<div id="app">
    <p>{{list}}</p>
</div>

 let vm = new Vue({
        el:"#app",
        data:{
            list:[1,2,3]
        }
    });
vm.list.push(6);

新增数据.png

• 不更改原数组的数值
  slice
  concat
  filter
  map
  可以使用新数组替换原来的数组，以使视图发生变化

 let vm = new Vue({
        el:"#app",
        data:{
            list:[1,2,3]
        }
    });
vm.list = vm.list.map((item) => item*2);

map.png

• 注意以下两点
  （1）通过索引直接设置项。
  （2）修改数组长度，vm.list.length=1
  不会触发视图的更新。