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

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>