Vue 组件开发 — 阶段总结

—— 组件要一层层叠加，不可能一口吃个胖子

---

🧩 一、组件是“由下而上”生长的

Vue 的组件开发，不是一次到位，而是逐层叠加的过程。
每一层负责解决一类问题，组合起来才构成完整系统。

✅ 经验法则：“每一层都能独立测试”

示例流程：

1. 先写最小可渲染单元（如一个 Item）
2. 再写容器层（批量渲染多个 Item）
3. 最后写布局舞台（负责缩放、对齐、交互）
4. 每一层写完都要挂上一个 <template> 做测试，确认功能与样式都稳定

小步快跑，组件自然生长，不必担心「重写」——好的设计一定能复用。

---

⚙️ 二、异步与响应式的平衡

Vue 里最容易混乱的部分是异步逻辑。
关键在于分清**“是否依赖外部输入”**：

✅ 情况 1：需要的数据是异步且依赖外部变化

→ 用 onMounted + watch

onMounted(() => {
  fetchData()
})

watch(() => props.sceneId, fetchData)

理由：

• onMounted 确保首屏加载；
• watch 保证外部参数变化时更新；
• 两者结合，既不重复也不漏。

---

✅ 情况 2：数据是内部响应式派生的

→ 用 watchEffect 更简洁

watchEffect(async () => {
  const scene = await getScene(props.sceneId)
  if (scene) update(scene)
})

watchEffect 的好处是自动追踪依赖，逻辑短小，非常适合「展示类组件」。

经验法则：

• 逻辑简单时用 watchEffect
• 有依赖顺序或需要防抖/取消时用 watch

---

🧱 三、测试驱动的思维方式

Vue 的组件越大，越容易隐藏 bug。
最有效的方式是——每层都写测试模板。

例如：

<!-- WorldMapItem.test.vue -->
<template>
  <WorldMapItem :sceneId="3126" />
</template>

哪怕只渲染一个静态示例，也能立刻发现：

• props 是否正确绑定
• 样式是否错位
• 异步逻辑是否触发两次

“写一个组件，测一个组件”，是保持结构清晰的秘诀。

---

🌿 四、小结：渐进与节奏

Vue 组件开发不是拼积木，而是养植物。
每天让它多长一点逻辑、多一层数据来源，
慢慢就能看到一棵稳固的系统树。

🌱 不急、不乱、不糊涂。
组件的复杂度永远来自未测试的那一层。

---

笔记 · yujang + ChatGPT
2025 年 11 月