vue2中不支持通过数组下标更改数组的值，无法做到响应式，页面没有重新渲染

首先直接看图：data中有一个persons数组，现在想修改第一条数据

methods: {
    updateMei(){
        // this.persons[0].name = '马老师' //奏效
        // this.persons[0].age = 50 //奏效
        // this.persons[0].sex = '男' //奏效
        this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
        // this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'}) // 奏效
    }
}

上述代码中，this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} 这行代码是不奏效的，虽然修改了data中的数据，但是页面中模版并没有更新。

 为什么？尤大给出的解释是：基于性能问题的考虑。

 Vue2的官方文档也写了，数组更新检测，只有下面7种方法被vue重写过的，主要做两个操作：1、先调用Array原型上对应的方法。2、重新解析模版，生成虚拟DOM

 也就是说，通过 this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} 这种直接修改数组下标的方式，vue底层是不会重新解析模版，更新视图的。 

但是为什么通过数组下标.属性名 this.persons[0].name，这种修改的方式可以更新视图呢？ 主要是因为数组中对象的属性都被添加了getter/setter

 综上所述：在Vue修改数组中的某个元素一定要用如下方法：

        

        1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

        2.Vue.set() 或 vm.$set()

也可以根据实际场景，使用filter、map等方法，对数据过滤处理后，重新赋值，也可以达到更新视图的目的 ：

除了通过数组下标的这种修改，此外还要注意的是：通过数组.length修改数组的长度，也不会触发页面的更新 ：

 如果帮助到您了，可以留下一个赞👍告诉我