这不是入门课，是组件实战的“最后一公里”

很多前端学习者卡在 Vue 的一个通病上：Vue 的基础语法都懂，响应式、指令、生命周期也都背过，但一旦面对一个真实需求，比如做一个手机通讯录，发现还是无从下手。或者写出来的代码虽然能跑，但结构混乱，组件之间耦合严重，维护起来极其痛苦。

这门课专门解决这个问题。它不讲虚的理论，也不重复基础 API，而是聚焦于「如何把一个复杂功能拆解成可复用的 Vue 组件」这一核心能力。课程以「手机通讯录」为载体，涵盖了数据增删改查（CRUD）、列表渲染、弹窗交互、数据筛选与搜索、组件通信（父子、兄弟）等高频工作场景。对于已经学过 Vue 基础，但缺乏完整项目实战经验的学员来说，这是从「会用标签」到「会写组件」的关键跨越。

适合有一定 HTML/CSS/JavaScript 基础，且已了解 Vue 基本语法的学员。如果你是完全零基础，建议先补齐 Vue 基础；如果你是老手，想复习组件设计规范，这门课也很合适。

建议先看哪几块，怎么配合练习

课程共 25 集，建议按以下顺序重点突破：

- **第 1～5 集**：快速过完，重点看整体项目结构和数据模型设计。通讯录需要哪些字段？数据从哪里来？这是架构意识的第一步。
- **第 6～12 集**：核心章节。重点学习列表如何渲染、新增联系人表单如何封装成独立组件、父子组件之间如何通过 `props` 和 `$emit` 传递数据。这是组件通信最典型的应用场景。
- **第 13～18 集**：进阶部分。关注搜索过滤逻辑的实现，以及删除、编辑操作的交互细节。注意看讲师是如何处理边界情况（比如空列表、重复姓名）的。
- **第 19～25 集**：完善与优化。包括联系人按字母排序、分组展示等 UI 增强功能。

练习时不要只看不做。建议先把视频里的代码跟着敲一遍，理解每个组件的职责划分；然后尝试自己实现一个类似功能，比如「待办事项清单」或「读书笔记管理」，迁移学到的组件设计思路。资料包中若有示例源码，可作为对照参考，但不要直接复制粘贴。

学完能独立做什么

完成这门课后，你将能够独立开发包含列表、表单、弹窗、搜索筛选等模块的中后台或移动端页面。更重要的是，你会建立起「先拆组件，再写代码」的思维习惯——面对一个新需求，能迅速判断哪些部分应该抽离成独立组件，哪些数据应该在哪些层级之间传递。

这套方法论适用于绝大多数企业级前端开发场景。无论是电商商品列表、后台管理系统，还是社交应用的消息列表，其底层逻辑与手机通讯录高度相似。掌握这一点，你离「能独立接活」就不远了。