为什么「先创建组件，后收到数据」会导致表单不回显？

---

核心问题解析：为什么「先创建组件，后收到数据」会导致表单不回显？

---

🕹️ 场景模拟

假设父组件有如下操作：

// 点击编辑按钮时
this.formVisible = true      // 1. 显示子组件
this.currentRow = rowData    // 2. 更新数据

由于 JavaScript 是单线程的，实际执行顺序可能为：

1. 子组件开始创建（formVisible 先变 true）
2. 父组件随后更新 currentRow

---

🔍 分步拆解问题

步骤 1：子组件初始化

// 子组件 created 钩子
created() {
  console.log(this.formData) // 初始值为 {}
}

此时父组件的 currentRow 尚未更新，子组件收到的 formData 是初始空值

步骤 2：父组件更新数据

// 父组件触发更新
this.currentRow = { id: 1, title: '测试数据' }

此时子组件已经完成初始化，若未正确监听 formData 变化，不会自动更新表单

---

💥 问题根因图示

---

三种常见失效场景对比

场景	数据流时序	结果	解决方案
未使用 v-if	数据更新 → 显示组件	✅ 正常回显	无需处理
使用 v-if 但顺序正确	设置数据 → 显示组件	✅ 正常回显	$nextTick 确保顺序
使用 v-if 且顺序错误	显示组件 → 设置数据	❌ 数据丢失	强化数据监听逻辑

---

🛠️ 终极解决方案

方案 1：强制数据先行（推荐✅）

// 父组件改造
private onEdit(row: any) {
  this.currentRow = { ...row }    // 1. 先准备好数据
  this.$nextTick(() => {          // 2. 等待数据渲染完成
    this.formVisible = true       // 3. 后显示组件
  })
}

方案 2：子组件强化监听（兼容性更强）

// 子组件增加深度监听
@Watch('formData', { immediate: true, deep: true })
private onFormDataChange(val: any) {
  if (val) {
    // 手动合并数据到表单
    this.form = { ...this.form, ...val }
  }
}

---

📚 原理总结卡

掌握这些核心原理，你将彻底征服 Vue 数据时序难题！ 🚀