18. VUE 数组的响应式

在VUE中 想响应式的 改变 data中的元素，直接改是不行的：可以试一下：

<div class="app">
        <ul>
            <li v-for="item in info" :key="item">{{item}}</li>
        </ul>
</div>

<script>
    const app = new Vue({
        el:".app",
        data:{
            info:['a','b','c','d','e']
        }
    })

    //尝试直接改变数组元素【a -> z】：
    app.info[0] = 'z'

</script>

可以看到 改变是没用的，原理我也不知道 反正就不可以直接改变，那么怎么改呢：

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新，Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新

下面是JS - Array对象的方法：

push() pop() shift() unshift() splice() sort() reverse()

其实有这几个 就够了，我们复习一下JavaScript 吧

---

 

push()

向数组的末尾添加一个或更多元素，并返回新的长度。

pop()

删除数组的最后一个元素并返回删除的元素。

shift()

删除并返回数组的第一个元素。

unshift()

向数组的开头添加一个或更多元素，并返回新的长度。

splice()

从数组中添加或删除元素。 ！！ 这个是很万能的一个方法啦 具体自己了解

sort()

对数组的元素进行排序。

reverse()

反转数组的元素顺序。

---

 

　　当然还有很多 具体要你自己去尝试和去写，还有呢就是 内个        splice  很强大   增删改 都没问题.