哪些数组的方法是响应式的？-CFANZ编程社区

哪些数组的方法是响应式的？
<body>
    <div id="app">
        <ul>
            <li v-for="item in letters">{{item}}</li>
        </ul>
        <button @click="btnClick">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                letters: ['A', 'B', 'C', 'D', 'E']
            },
            methods: {
                btnClick() {
                    /*            响应式              */
                    // 1. push方法 在后面添加数据
                    // this.letters.push('aaa')
                    // this.letters.push('aaa','bbb','ccc')
                    // this.letters.

                    // 2. pop()  删除数组中的最后一个元素
                    // this.letters.pop();

                    // 3. shift()  删除数组中的第一个元素
                    // this.letters.shift();

                    // 4. unshift()  在数组最前面添加元素
                    // this.letters.unshift('aaa')
                    // this.letters.unshift('aaa', 'bbb', 'ccc')

                    // 5. splice作用:删除元素/插入元素/替换元素
                    // splice(start)
                    // (1) 删除元素: 第二个参数传入你要删除几个元素
                    // this.letters.splice(1, 2) //从第一个元素开始，删除2个元素
                    // this.letters.splice(1) //只传一个参数，表示从第1个参数开始，后面的全部删除
                    // (2) 替换元素: 第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
                    // this.letters.splice(1, 2, 'z', 'y', 'y') //我的理解: 删掉2个元素，并且在删掉元素的位置添加后面的元素
                    // (3) 插入元素: 第二个参数，传入0，并且后面跟上要插入的元素
                    // this.letters.splice(1, 0, 'z', 'y', 'y')


                    // 6. sort()  排序
                    // this.letters.sort()

                    // 7. reverse()  反转
                    // this.letters.reverse()

                    // 8.
                    // set(要修改的对象, 索引值, 修改后的值)  索引值是修改哪个位置的
                    // Vue.set(this.letters, 0, 'bbbbbb')

                    // 一个小例子  可变参数
                    /* function sum(...num) {
                        console.log(num);
                    }
                    sum(10, 20, 30, 40, 50, 60) */


                    /*            不是响应式              */

                    //注意:通过索引值修改数组中的元素
                    this.letters[0] = 'bbbbbb';

                    // 老师说不是响应式，但我运行响应了(现在的版本这个方法是响应的)
                }
            },
        })
    </script>
</body>
0 条评论