Vue v-model绑定输入框挂载时不更新、步骤切换后内容为空问题

• 核心是Vue响应式依赖收集异常：你用到的嵌套属性（比如model.article.content）没有提前在父组件的model中声明初始值，Vue无法对这类动态新增的属性做响应式监听，属性变更时不会触发视图更新。
• 用v-if控制步骤组件显示会导致切换步骤时组件销毁重建，重建时未触发响应式属性的依赖收集，只有其他事件触发组件整体重渲染时，才会读取到最新的属性值展示。

1. 提前声明完整的响应式数据结构
   在父组件的data中提前定义所有用到的model嵌套属性，给初始值保证Vue能正确监听所有字段：

// 父组件data示例
data() {
  return {
    activeStep: 'first',
    model: {
      type: '',
      header: '',
      article: {
        content: ''
      }
      // 所有后续用到的字段都提前声明，初始值可设为空字符串/空数组等对应类型默认值
    }
  }
}

如果是Vue2环境，后续需要动态新增属性时，必须用this.$set来保证响应式：

// 错误写法 不会触发响应式
this.model.article = { content: 'xxx' }
// 正确写法
this.$set(this.model, 'article', { content: 'xxx' })

2. 替换v-if为v-show控制步骤显示
   v-show仅控制元素的显隐，不会销毁重建组件实例，避免重建导致的依赖丢失问题：

<template>
 <div>
   <first-step v-show="activeStep==='first'"/>
   <second-step v-show="activeStep==='second'"/>
   <third-step v-show="activeStep==='third'"/>
  <button @click="nextStep">Next</button>
  <button @click="previousStep">Previous</button>
 </div>
</template>

3. 给步骤组件绑定唯一key强制更新
   如果需要保留v-if的销毁逻辑，给每个步骤组件绑定随activeStep变化的唯一key，强制Vue切换步骤时正确重新渲染组件：

<second-step v-if="activeStep==='second'" :key="`step-second`"/>
<third-step v-if="activeStep==='third'" :key="`step-third`"/>

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