Vue 中操作data中数组的方法中哪些可以触发视图更新， 哪些不可以，不可以的话有什么解决办法？

在 Vue（尤其是 Vue 2） 中，data 里的数组操作有些方法能直接触发视图更新，有些则不会。
原因是 Vue 2 用的是 基于 Object.defineProperty 的响应式系统，它对数组的方法做了特别的处理，但有些变化检测不到。

可以触发视图更新的数组方法

Vue 2 内部 重写 了这些原型方法，调用它们时会触发视图更新：

修改数组内容的变更方法：

push()    // 末尾添加
pop()     // 删除最后一个
shift()   // 删除第一个
unshift() // 开头添加
splice()  // 删除/替换/添加
sort()    // 排序
reverse() // 反转

这些方法都能 触发响应式更新，因为 Vue 已经拦截它们。

不能触发视图更新的情况

Vue 无法检测 以下数组变动：

1.直接通过索引修改元素

this.list[1] = 'new value'; // ❌ 不会触发更新

2.直接修改数组长度

this.list.length = 0; // ❌ 不会触发更新

原因：Object.defineProperty 不能拦截数组索引的变化，也不能感知 length 的变化。

解决办法

方法 1：Vue.set() 或 this.$set()

// 替换索引 1 的值
this.$set(this.list, 1, 'new value');

// 或者
Vue.set(this.list, 1, 'new value');

方法 2：用 splice() 代替

// 把索引 1 的值替换成 new value
this.list.splice(1, 1, 'new value');

// 清空数组
this.list.splice(0);

Vue 3 的区别

Vue 3 用了 Proxy，可以直接监听索引赋值和 length 改变，所以：

this.list[1] = 'new value'; //  会更新
this.list.length = 0;       //  会更新

Vue 3 基本没有这个限制。