关于添加class属性遇到的问题

Question

问题遇到的现象：
给一个div添加class，这个class是一个moodArr数组用vue的v-bind动态绑定的，但是利用 this.moodArr[3]="class4"; 往moodArr数组里添加元素，添加之后数组里面有这个元素但是在页面却不生效。
要这样写才生效this.moodArr=["1", "2", "3","4"];
PS：moodArr原本就有的元素：moodArr: ["1", "2", "3"]
（PS：这里的1 2 3 4分别是是class1 2 3 4，因为页面不允许重复输入多次class）
代码:

<script>
            new Vue({
                el: "#root",
                data: {
                    name: "123",
                    moodArr: ["class1", "class2", "class3"]
                },
                methods: {
                    changeMood() {
                         console.log(this.moodArr.length);
                         this.moodArr[3]="class4";    
                    //    this.moodArr=["class1", "class2", "class3","class4"];
                         console.log(this.moodArr.length);
                        for (let i = 0; i < this.moodArr.length; i++) {
                            console.log(this.moodArr[i]);
                        }
                    }
                }
            });
        </script>

<style>
            .basic {
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
            .class1 {
                background-color: aquamarine;
            }
            .class2{
                color: wheat;
            }
            .class3{
                font-size: 50px;
            }
            .class4{
                font-style: italic;
                font-weight: 800;
            }
        </style>

<div id="root">
            <div class="basic" :class="moodArr" @click="changeMood()">{{name}}</div>
        </div>

运行结果:
触发点击事件之后，在控制台打印中也可以看到数组长度确实+1了，遍历这个数值也有class4这个元素。

但是在页面上的样式并没有用上class4的样式。

我想要达到的结果：
正确的结果利用this.moodArr=["1", "2", "3","4"];

class4的样式斜体加粗也用了。
问题就是：为什么利用 this.moodArr[3]="class4"; 往moodArr数组里添加元素，添加之后数组里面有这个元素但是在页面却不生效？

Answer 1

正常来说我们操作数组 很少会通过下标来操作，而在vue 源码中，是通过重写数组得 push, pop,shift,unshift,sort,reverse,splice 这个七个能改变数组得方法，来达到数据更新，视图变化，所以在vue 不要操作下标来修改数组