Vue 2动态组件遇无关值变更时刷新丢失输入值求助

一、修改无关值时动态组件刷新丢数据的原因与解决 #

原因 #

渲染动态组件时未添加唯一且稳定的key。当父组件中period这类无关数据变化时，Vue会重新执行模板渲染；对于无key的列表/动态组件，Vue会采用“就地复用”策略，直接销毁旧组件并创建新组件，导致已输入数据全部丢失。

解决方法 #

给动态组件绑定唯一且不会随渲染变化的key，比如基于标记的唯一ID（若标记顺序固定，也可使用索引）。示例代码：

<template>
  <div>
    <select v-model="period">
      <option value="daily">每日</option>
      <option value="weekly">每周</option>
    </select>

    <component
      v-for="item in dynamicItems"
      :key="item.id" <!-- 用唯一ID作为key，避免使用易变的索引 -->
      :is="item.component"
      v-model="item.value"
    ></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      period: 'daily',
      dynamicItems: [
        { id: 'input-tag-1', component: 'input', value: '' },
        { id: 'input-tag-2', component: 'input', value: '' }
      ]
    }
  }
}
</script>

稳定的key会让Vue识别出组件无需重建，仅更新必要内容，从而保留输入数据。

二、v-model绑定后输入时失焦的原因与解决 #

原因 #

主要有两种触发场景：

1. 输入时直接修改了v-model绑定的数据结构（比如替换整个数组项），导致组件key关联的引用变化，触发组件重建；
2. 动态组件的模板/组件引用不稳定（比如每次渲染时重新创建组件定义），导致组件频繁重渲染。

解决方法 #

1. 保持数据引用稳定，避免直接替换对象

不要直接替换数组中的对象，而是修改对象属性：

// 错误写法：直接替换对象，破坏引用稳定性
this.dynamicItems[index] = { ...this.dynamicItems[index], value: newVal }

// 正确写法：直接修改属性，保持对象引用不变
this.dynamicItems[index].value = newVal

2. 提前注册动态组件，保持引用稳定

若使用自定义组件作为动态组件，需在components选项中提前注册，而非在data中临时创建：

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: { CustomInput }, // 提前注册组件，保证引用稳定
  data() {
    return {
      dynamicItems: [
        { id: 'custom-input-1', component: 'CustomInput', value: '' }
      ]
    }
  }
}
</script>

3. 优先使用唯一ID作为key

避免用索引作为key（若列表顺序可能变化），索引变动会导致组件关联关系混乱，间接引发失焦问题。

总结 #

核心问题源于Vue的组件渲染机制：无稳定key会触发组件重建，数据结构不稳定会导致组件频繁重渲染。只要保证动态组件有唯一稳定的key，且响应式更新时保持数据引用稳定，两个问题即可解决。

内容的提问来源于stack exchange，提问作者riaan Laubscher