Vue数组更新

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