为什么通讯录是 Vue 组件化的最佳试炼场
很多初学 Vue 的同学，能看懂官网的 Hello World，也能跟着敲一遍 Todo List，但一旦拿到一个真实需求，比如做一个“手机通讯录”，就不知道如何拆解。这张课程资源解决的正是这个能力缺口：它把通讯录功能拆分为头部搜索、列表渲染、联系人卡片、添加编辑弹窗等多个独立组件，完整演示了父传子、子传父、插槽以及局部注册的实际用法。
适合基础与阅读顺序建议
**你需要具备的基础**：已经掌握 Vue 基础语法，理解模板语法、指令、计算属性，知道什么是 props 和 events，但不太清楚如何把这些零散知识点组织成一个可维护的多组件工程。如果你还在纠结“为什么我要分这么多组件”，那这门课就是为你准备的。
**建议学习顺序**：
- **先看前 3 集**：了解整体项目结构，弄清楚哪些是容器组件（管理数据），哪些是展示组件（只负责渲染）。这一步能帮你建立“组件树”的空间感。
- **重点攻克中间 10 集**：这是核心实战区，你会看到如何通过 $emit 实现父子通信，如何利用 v-model 简化双向绑定，以及如何用 computed 处理搜索过滤逻辑。每集暂停、动手敲一遍，不要只是看。
- **最后 5 集**：关注细节优化，如输入框防抖、表单验证、组件复用等，这些是区分“能跑就行”和“代码健壮”的关键。
学完能独立做什么
完成这套内容后，你应该能够独立完成以下任务：
- 看到一个复杂界面，能快速画出组件拆分图，明确各组件的职责边界；
- 熟练运用 props 向下传递数据，通过事件向上汇报交互，不再依赖全局变量或 $refs 滥用；
- 封装出一个通用的“可搜索联系人列表”组件，能在不同页面复用，只需传入不同的数据源；
- 解释清楚“为什么这里要用 computed 而不是 watch”或“为什么事件要放在子组件而不是父组件”。
资料如何配合练习
课程本身已提供完整的示例代码和阶段性快照，建议在观看每一集视频时，关闭屏幕，尝试自己从零搭建对应组件，再与视频代码对比差异。如果卡住，回看视频时重点记录思路断点。课后自行扩展功能：比如给联系人添加头像上传、按字母排序、或支持删除确认弹窗，以此检验你是否真正内化了组件化思维，而非仅仅模仿了代码。
