数组中哪些数组方法具备响应式

数组中哪些数组方法具备响应式

关于数组的方法的响应式，代码如下：

<!-- 数组中哪些方法在vue中是响应式的
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
 -->
<div id="app">
    <ul>
        <li v-for="item in name">{{item}}</li>

    </ul>
    <button @click="btnClick">戳它</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: ["张三", "李四", "王五"]
        },
        //如何判断是否具有响应式，可以直接修改或者在后台修改数据，观察页面数据是否发生变化，如果改变，就具有响应式，否则没有
        methods: {
            btnClick: function () {
                //1.push()，后增，具有响应式
                // return this.name.push("王麻子")

                //2.pop(),后删，具有响应式
                //return this.name.pop()

                //3.shift(),前删，具有响应式
                // return this.name.shift()

                // 4.unshift(),前增，具有响应式
                // return this.name.unshift(4)
                // return this.name.unshift(4, 7, 8, 9, 00)
                // 为什么unshift可以有多个参数呢？是应为在vue源码中，它的封装如下面的sum函数，参数有三个点的时候，表示可变参数。在不确定有多少个参数的时候，可以使用这个方式，可以输入很多个数值。

                // 5.通过数组的索引值修改,不具备响应式，当使用索引修改值的时候，页面信息不改变，但是打印出来的数据已经发生改变（不建议使用,若需要修改，建议使用splice）
                //(3) ["张三", "aaa", "bbb", __ob__: Observer]
                // return this.name[1] = "aaa"

                //6.splice(start,),这个方法包含增、删、改三个方法，具备响应式
                // start:从哪开始，关于第二个参数
                //（1）第二个参数传入你要删除的元素个数(后删)
                // (2)第二个参数为删除的元素的个数，第三个参数将已经删除的元素改变为第三个的参数的值
                // (2)当第二个参数值为0时，第三个参数为插入第一个元素位置的值，即为增
                // return this.name.splice(1, 1, "啊啊啊啊")
                //【注】此处的第三个参数其实可以是很多的参数，全部为插入或者修改的参数值，为了方便，统称其为第三个参数

                //7.sort()，排序
                // return this.name.sort()

                //8.reverse(),反转，具备响应式
                return this.name.reverse()
            }
        }
    })
    
    let kk = "";
    function sum(...num) {

        console.log(num)
    }
    sum(111, 222, 333, 444, 5555, 999)
    
</script>