Vue 3 组件化开发实践：构建待办事项列表应用 - 迈向模块化前端架构

引言

欢迎回到 Vue 3 + 现代前端工程化 系列技术博客！ 在昨天的第一篇博客中，我们一同探索了 Vue 3 响应式系统的奥秘，并通过构建一个简单的计数器应用，初步领略了数据驱动视图的强大魅力。 今天，我们将更进一步，深入 Vue 3 的另一核心概念：组件化开发。

组件化是现代前端开发中至关重要的思想，它如同乐高积木一般，将复杂的用户界面拆解为独立、可复用的模块。 Vue 3 在组件化方面提供了强大的支持，让我们能够以更高效、更可维护的方式构建大型应用。 在本篇博客中，我们将通过构建一个实用的 待办事项列表应用，深入理解 Vue 3 组件化开发的精髓，并掌握组件创建、数据传递、事件通信等关键技能。

通过这个项目，您将学习到：

• Vue 3 组件化核心概念: 深入理解组件的复用性、模块化、以及单文件组件 (SFC) 的结构。
• 组件创建与注册: 掌握 Vue 3 组件的创建方式，并学会如何在父组件中注册和使用子组件。
• Props 数据传递: 学习使用 props 属性将数据从父组件传递到子组件，构建清晰的数据流。
• 事件通信: 掌握使用 emits 和事件监听实现子组件向父组件传递消息，构建组件间的交互。
• 构建模块化 UI: 体验使用组件构建复杂用户界面的过程，提升代码组织性和可维护性。
• 技能跃迁: 从基础应用开发迈向组件化架构，提升您的 Vue 3 项目组织和设计能力。

项目简介： 待办事项列表应用

我们的待办事项列表应用将围绕以下核心功能展开：

• 添加待办事项: 用户可以输入待办事项内容，并添加到列表中。
• 显示待办事项列表: 清晰地展示所有待办事项，包括事项内容。
• 删除待办事项: 用户可以删除已完成或不需要的待办事项。

通过构建待办事项列表应用，我们将深入实践：

• 组件拆分: 将应用界面拆分为 App.vue (应用容器) 和 TodoItem.vue (待办事项项) 两个组件。
• Props 数据传递: 使用 props 将待办事项数据从 App.vue 传递到 TodoItem.vue 组件进行展示。
• 事件触发: 在 TodoItem.vue 组件中触发 “删除” 事件，通知父组件 App.vue 删除对应的待办事项。
• 列表渲染: 使用 v-for 指令渲染待办事项列表，动态展示数据。

Vue 3 组件化开发核心概念回顾

在深入项目实战之前，让我们回顾 Vue 3 组件化开发的核心概念，为后续的实践打下坚实的基础。

• 组件是可复用的构建块: Vue 3 组件是独立、可复用的代码块，包含了自身的模板 (<template>)、逻辑 (<script>) 和样式 (<style>)。 组件化的核心思想是将 UI 界面拆分成多个独立的组件，每个组件负责一部分功能，最终组合成完整的应用。 组件的复用性极大地提高了开发效率和代码可维护性。
• Props 用于数据传递: Props 是组件接收外部数据的接口。 父组件可以通过 props 将数据传递给子组件。 Props 是单向数据流，数据只能从父组件传递到子组件，子组件不能直接修改 props 的值，保证了数据流的可追踪性和组件的独立性。
• Events 用于组件通信: Events 是子组件向父组件传递消息的机制。 当子组件需要通知父组件某些事件发生时，可以通过 emits 声明可以触发的事件，并使用 $emit 方法触发事件。 父组件可以在使用子组件时，通过 @event-name 监听子组件触发的事件，并执行相应的逻辑。
• 单文件组件 (SFCs) - .vue 文件: Vue 3 推荐使用单文件组件 (Single-File Compone