9.Vue操作数组时的注意事项

由于 JavaScript 语言本身的限制，当我们对数组进行某些操作时，Vue 可能不会检测到数组元素的变化，那么进而视图也不会响应。比如：

<div id="app">
    <p v-for="(item,index) in userArr">
        ,,
    </p>
    <button @click="clear">清空</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            userArr: [{
                userId: 1,
                userName: '张三',
                userSex: '男'
            }, {
                userId: 2,
                userName: '李四',
                userSex: '女'
            }, {
                userId: 3,
                userName: '王五',
                userSex: '男'
            }]
        },
        methods: {
            clear() {
                this.userArr.length = 0;
                console.log(this.userArr.length);    //0
            }
        }
    });
</script>

上面实例中，将数组的长度设置为0后，数组确实被清空了。但是Vue却不能检测到数组的变化，所以页面视图也不会响应。

为了解决这个问题，Vue给我们提供了如下解决方案： Vue 提供一组观察数组的变异方法（就是这些方法会改变原始数组，所以才会被Vue检测到），使用它们就可以触发视图更新。 这些方法有7个：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

<div id="app">
    <p v-for="(item,index) in userArr">
        ,,
    </p>
    <button @click="clear">清空</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            userArr: [{
                userId: 1,
                userName: '张三',
                userSex: '男'
            }, {
                userId: 2,
                userName: '李四',
                userSex: '女'
            }, {
                userId: 3,
                userName: '王五',
                userSex: '男'
            }]
        },
        methods: {
            clear() {
                //使用Vue中提供的变异方法
                this.userArr.splice(0,this.userArr.length);
            }
        }
    });
</script>