Vue中调用push方法向数组添加元素时DOM未更新

核心原因 #

Vue的响应式更新依赖对数据变更的劫持检测，直接操作数组没触发更新，通常是响应式声明缺失、虚拟DOM比对异常、深层数据变更未被劫持三类问题导致，结合你贴的模板代码，优先按以下顺序排查：

• 模板key绑定错误：你当前给checkbox绑定的:key="term"是直接传入整个对象，key要求是唯一的字符串/数字类型原始值，绑定对象会导致虚拟DOM diff算法判定节点无变化，直接复用旧DOM，哪怕数据更新了视图也不会重绘。
• 操作的数组未做响应式声明：如果数组是在运行时直接给组件实例挂载、或者在普通变量里定义后直接赋值给模板，没有在data（Vue2选项式）/ref/reactive（Vue3组合式）里提前声明，Vue不会对这个数组做响应式劫持，自然无法感知push操作。
• 深层嵌套数据变更未被检测：Vue2无法检测对象新增属性、数组通过索引直接赋值的操作，如果你的数组是在多层嵌套的对象里，直接push可能因为上下文没被劫持导致更新不触发。
• 依赖的响应式值变更未触发：你模板里的:checked逻辑依赖installments对象，如果这个对象新增属性时没有触发响应式更新，也会连带导致勾选状态视图不同步。

修复步骤 #

1. 先修正模板key绑定，把对象key换成数据唯一标识：

<template>
  <td>
    <input
      :key="term.id"
      type="checkbox"
      :checked="
        term.payment_status != 'pending' ||
        (tenureAction == 'renew' &&
          key == 0 &&
          Object.keys(installments)[0] == index)
      "
      :disabled="term.payment_status != 'pending' || tenureAction == 'renew'"
      @click="setUnsetTermId(term.id)"
    />
  </td>
</template>

2. 确认数组是提前声明的响应式值：
   • Vue2选项式API：必须把要渲染的数组提前写在data的返回值里，不要在created/mounted等钩子中临时给this挂载新数组属性
   • Vue3组合式API：数组必须用ref/reactive包裹声明，操作ref数组时记得加.value

   // Vue2 正确声明示例
   data() {
     return {
       termList: [] // 提前声明
     }
   }
   // 操作时直接调用被劫持的push方法即可
   this.termList.push(newTerm)
   
   // Vue3 正确声明示例
   const termList = ref([])
   termList.value.push(newTerm)
   

3. 深层嵌套数组/对象操作如果还是不触发更新，直接替换引用强制触发响应：
   Vue2场景下可以用$set方法更新，或者生成新数组/新对象替换旧值：

   // 嵌套在form对象下的数组更新
   const newTerm = { id: xxx, payment_status: 'pending' }
   // 方法1：生成新数组替换
   this.form.termList = [...this.form.termList, newTerm]
   // 方法2：$set更新
   this.$set(this.form, 'termList', [...this.form.termList, newTerm])
   
   // installments对象新增属性也要用同样方式处理，不要直接加key
   this.$set(this.installments, newIndex, newInstallment)
   

4. 如果是勾选状态不更新，可以在push操作完成后加一句this.$forceUpdate()（Vue2）强制刷新视图做兜底，不推荐优先使用，优先排查前面的响应式问题。

内容的提问来源于stack exchange，提问作者Saad Shahid