首先直接看图：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修改数组的长度，也不会触发页面的更新 ：
如果帮助到您了，可以留下一个赞👍告诉我
