数组中常用的几个响应式方法

push
添加元素到数组的尾部,可以添加任意个元素
pop
删除数组中的最后一个元素
shift
删除数组中的第一个元素
unshift
从数组的头部插入一个元素, 也可以插入多个
splice
添加
第二个参数是0
删除
第二个参数是删除元素的个数
修改
第二个参数是替换元素的个数
sort
排序
reverse
倒序
Vue提供的set/delete方法
新增与删除

示例：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
</div>
<script>
 const vm = new Vue({
     // 选项
     el: '#app',
     data: {
         letters: ['a', 'b', 'c','d','e','f']
     },
     components: {}
     ,
     methods: {
         btnClick() {
             // 第一个响应式方法push
             // this.letters.push("aaa")
             // 一次加多个
             // this.letters.push("aaaa", 'bbbb', 'ccccc')

             // 第2个响应式方法pop, 删除最后一个元素
             // this.letters.pop()

             // 第3个响应式方法shift, 删除第一个元素
             // this.letters.shift()

             // 第4个响应式方法unshift,添加一个元素到数组的头部
             // this.letters.unshift('123')
             // 加多个
             // this.letters.unshift('1','2','3')

             // 第5个响应式方法splice
             // splice : 可以删除元素, 插入元素,修改元素
             // 第1个参数表示:数组中的第几个元素
             // 如果是删除元素, 第2个是表示想要删除几个元素, 如果没传第2个参数,就是删除后面的所有元素
             // this.letters.splice(2, 1)

             // 替换, 用'aa','bb','cc','dd'替换第1个元素后面的3个元素
             // this.letters.splice(1,3,'aa','bb','cc','dd')

             // 添加, 第2个参数是0
             // this.letters.splice(1,0,'x','y','z')

             // 第6个响应式方法sort

             this.letters.sort()

             //第7个响应式方法reverse

             this.letters.reverse()

             // 第8个响应式方法set(Vue提供的方法)
             // 第1个参数: 目标源
             // 第2个参数: 要修改的索引值
             // 第3个参数: 修改后的值
             Vue.set(this.letters,0,'9')

             // 通过数组的下标去修改元素,并不能做到响应式
             // this.letters[0] = 'aaaaaa'
         }
     }
    })
</script>

转系https://www.cnblogs.com/z-qinfeng/p/13062732.html