在Vue 2项目里，不少人在处理表单提交逻辑时会遇到一种奇怪现象：明明已经把新数据写进了数组，控制台打印也显示内容变了，可是页面上的列表却纹丝不动。这其实是Vue 2响应式系统对数组的特殊处理机制导致的，并不是框架bug，而是开发者没有用对更新方式。
为什么数组索引赋值不会触发更新
Vue 2的响应式是基于Object.defineProperty实现的。在初始化阶段，框架会递归遍历数据对象，把每个属性变成getter和setter，从而追踪依赖和派发更新。但是对于数组，Vue 2并没有对每一个索引都做这种劫持，主要原因是为了性能考虑。如果数组很长，给每个索引加getter和setter会带来明显的初始化开销。
因此当你使用类似this.list[0] = newValue这样的语句时，虽然改变了数组内容，却没有触发任何被Vue拦截的setter，依赖该数组的组件自然不会重新渲染。同样，直接修改this.list.length = 0来清空数组也不会被感知。下面的代码就展示了这种无效更新方式：
// 假设 data 中有 list: ['a', 'b', 'c']
methods: {
submitForm() {
// 这种方式不会触发视图更新
this.list[1] = 'new value';
// 打印出来确实是改了，但页面不变
console.log(this.list);
}
}
使用Vue.set保证索引赋值响应式
如果确实需要通过索引去替换某一项，Vue 2提供了全局APIVue.set（或者实例方法this.$set）。它会在底层调用数组的splice方法，并同时通知依赖更新。这样既能修改数据，又能让视图保持同步。
下面是用this.$set改写后的安全写法。注意第一个参数是数组本身，第二个是索引，第三个是新值。这种写法在动态表单、表格行内编辑等场景中非常实用，可以避免很多“数据变了页面没变”的排查时间。
methods: {
submitForm() {
// 正确做法：使用 $set 触发响应式更新
this.$set(this.list, 1, 'new value');
}
}
优先使用数组变异方法
Vue 2对以下数组方法做了包装，调用它们会自动触发视图更新：push、pop、shift、unshift、splice、sort、reverse。在表单提交后如果需要追加、删除或替换元素，应优先使用splice等方法，而不是重新赋值索引。
例如提交表单后把新记录插到数组头部，用unshift即可；如果要替换第n项，用splice更直观。下面示例展示提交后替换并删除旧数据的常见操作：
methods: {
submitForm(newItem, index) {
// 用 splice 替换指定位置元素，可触发更新
this.list.splice(index, 1, newItem);
}
}
整体替换数组引用的技巧
有时候表单提交涉及批量更新，逻辑较复杂。此时可以生成一个新数组，然后直接赋值给原数据属性。因为Vue 2对数组引用本身的改变是能感知的（引用地址变了会走setter），所以这种“克隆替换”方式也很稳妥。
可以用展开运算符或map方法得到新数组，再赋给this.list。这样做代码清晰，也绕开了索引赋值的坑。示例如下：
methods: {
submitForm() {
// 基于旧数组映射出新数组，整体替换
const newList = this.list.map(item => {
return item.trim ? item.trim() : item;
});
this.list = newList;
}
}
异步队列与更新时机的注意点
Vue 2在检测到数据变化后，并不会立刻更新DOM，而是把Watcher推入异步队列，在下一个事件循环 Tick 中批量执行。这意味着即使在提交方法里用对了$set或splice，如果紧接着用代码去读DOM状态，也可能拿到旧视图。需要获取更新后DOM时，应使用this.$nextTick。
在表单提交后若需根据渲染结果做后续动作，比如滚动到新添加的行，把逻辑写在$nextTick回调里最安全。这能避免因为视图未刷新而导致的坐标计算错误。
methods: {
submitForm() {
this.$set(this.list, this.list.length, 'added');
this.$nextTick(() => {
// 此时 DOM 已更新，可执行依赖新节点的操作
console.log('列表已渲染最新项');
});
}
}
| 更新方式 | 是否响应式 | 适用场景 |
|---|---|---|
| 索引直接赋值 | 否 | 不推荐 |
| this.$set | 是 | 精确修改某一项 |
| splice等方法 | 是 | 增删改查数组元素 |
| 整体替换引用 | 是 | 批量处理或映射 |
只要理解Vue 2对数组的响应式限制，在表单提交后优先选用$set、变异方法或引用替换，再配合$nextTick处理DOM依赖，就能彻底解决数组数据不立即更新的问题，让交互体验保持一致。