Summary
Overview
本课程系统讲授 Vue 3 单文件组件（SFC）的核心开发能力，涵盖声明式渲染、响应式数据绑定、事件监听、表单双向绑定（v-model）、条件渲染（v-if/v-else）、列表渲染（v-for）、计算属性（computed）与监听器（watch）等关键概念。课程通过多个渐进式练习，引导学习者从基础的 Hello World 展示，逐步过渡到构建完整的待办事项（To-Do List）应用，最终理解 Vue 如何通过响应式系统自动同步视图与数据，显著简化传统 DOM 操作。课程强调 Vue 的声明式编程范式与框架抽象优势，对比原生 H5/JavaScript 实现，突出其开发效率与维护性提升。
Topic (Timeline)
1. Vue 单文件组件与声明式渲染基础 [00:00:05 - 00:06:31]
- 介绍 Vue 单文件组件（.vue 文件）结构：包含
<template>、<script>、<style>三部分，由 Vue 编译为浏览器可识别的 HTML、JS、CSS。 - 展示基础示例：输出 “hello world”，说明 Vue 自动将组件内容渲染到页面。
- 引入“声明式渲染”概念：通过模板描述 UI 状态，Vue 自动处理 DOM 更新，无需手动操作元素。
- 提示学习者可在本地编辑器中动手实践，通过点击按钮对比答案。
2. Script Setup 语法与响应式数据绑定 [00:06:31 - 00:17:19]
- 明确课程聚焦 Vue 3 的
script setup语法，忽略 Vue 2 旧语法。 - 演示如何通过
ref()API 创建响应式变量（如count），并使用双花括号{{ }}在模板中绑定其值。 - 强调：基本类型（如字符串、数字）可直接在模板中使用，复杂数据需先用
ref()定义。 - 练习：将静态文本 “make me write” 改为红色（通过 CSS 类绑定），并动态添加数字 “666” 到文本后。
3. 属性绑定与事件监听 [00:17:19 - 00:22:21]
- 讲解属性绑定语法：使用
:（如:class、:id）替代v-bind:，实现动态绑定 HTML 属性。 - 演示如何通过
@click监听用户点击事件，绑定方法（如increment()）修改响应式变量。 - 说明
ref()创建的变量在方法中可被直接访问和修改，Vue 会自动追踪变化并触发视图更新。 - 对比原生 H5：说明 Vue 无需
getElementById或addEventListener，通过响应式系统自动同步。
4. 表单双向绑定（v-model） [00:22:51 - 00:29:41]
- 引入
v-model指令，实现表单元素（如<input>）与响应式数据的双向绑定。 - 说明
v-model自动处理value属性绑定与input事件监听，简化数据同步逻辑。 - 练习：用户输入内容，实时在页面下方显示，无需手动编写事件处理器。
5. 条件渲染与列表渲染（v-if/v-else/v-for） [00:29:41 - 00:42:24]
- 讲解
v-if/v-else在模板中实现条件显示，典型应用：用户登录状态控制页面内容。 - 讲解
v-for在模板中循环渲染列表，替代原生 JS 操作 DOM。 - 综合练习：构建 To-Do List 应用，实现：
- 用户输入添加条目；
- 点击 “×” 删除条目；
- 当列表为空时，显示 “列表为空” 文本，否则显示列表；
- 使用
v-if判断todoList.length === 0控制显示。
- 强调：
v-if会完全移除/创建 DOM 元素，避免无用渲染。
6. 性能优化：避免不必要的 DOM 渲染 [00:42:24 - 00:45:02]
- 指出初学者常见错误：将
v-if与v-for同级使用，导致即使列表为空，<ul>仍被渲染。 - 建议：将
v-if与v-for包裹在<div>中，确保空列表时完全不渲染<ul>，提升性能。 - 强调：在复杂或资源密集型组件中，减少无用渲染对用户体验至关重要。
7. 计算属性（computed） [00:45:04 - 00:56:50]
- 引入
computed：用于派生数据，不修改原始数据，仅根据依赖自动重新计算。 - 案例：商品价格 = (员工成本 + 物料成本) × (1 + 利润率)，当任一输入变化，价格自动更新。
- 练习：基于 To-Do List，使用
computed计算“已勾选”或“已隐藏”条目数量，实现复用。 - 强调：计算属性可被多个地方复用，支持链式依赖。
8. 生命周期钩子与挂载（onMounted） [00:56:53 - 01:03:00]
- 介绍 Vue 3 的生命周期钩子（如
onMounted），替代 Vue 2 的mounted。 - 说明
onMounted在组件挂载到 DOM 后触发，用于执行初始化操作（如获取数据、绑定事件）。 - 强调：生命周期钩子是框架内部机制，开发者应合理使用，避免在错误阶段修改状态影响性能。
9. 监听器（watch）与异步操作 [01:03:00 - 01:09:56]
- 讲解
watch：监听响应式数据变化，执行副作用操作（如发送网络请求）。 - 案例：当
todoList变更时，自动调用fetchData()向服务器同步数据。 - 对比：
computed用于派生值，watch用于执行副作用。 - 简述 Node.js 异步编程模型（非阻塞、事件驱动），解释为何前端需异步处理网络请求。
10. 回调地狱与现代异步编程 [01:09:56 - 01:12:50]
- 回顾早期 JavaScript 回调嵌套（callback hell）问题，举例多层
.then()嵌套。 - 指出 Vue 项目中虽不直接写 Node.js，但异步逻辑（如 fetch）仍需清晰结构。
- 强调：现代开发应避免深层回调，使用 async/await 或清晰的函数拆分提升可读性。
11. 双向绑定扩展：复选框与表单元素 [01:12:54 - 01:16:21]
- 展示
v-model不仅适用于<input>，也适用于<checkbox>、<select>、<date>等交互元素。 - 案例：勾选复选框自动更新
todo.completed状态，实现双向同步。 - 总结：双向绑定本质是框架封装的“数据绑定 + 事件监听”组合，降低开发复杂度。
12. 课程总结与休息 [01:16:21 - 01:19:41]
- 课程上午内容结束，提醒学员休息。
- 总结核心收获：Vue 通过响应式系统、声明式模板、v-model、computed、watch 等机制，极大简化前端开发流程。
- 强调：理解“数据驱动视图”是掌握 Vue 的核心思想。
Appendix
Key Principles
- 声明式渲染：描述“要什么”，而非“怎么做”。
- 响应式系统：数据变更自动触发视图更新，无需手动操作 DOM。
- 单文件组件（SFC）：封装模板、逻辑、样式，提升可维护性。
- v-model：双向绑定表单元素，简化数据同步。
- computed：派生数据，缓存计算结果，依赖变化自动重算。
- watch：监听数据变化，执行副作用（如 API 调用）。
- v-if/v-for：在模板中控制渲染，避免手动 DOM 操作。
- 性能意识：避免无用渲染（如将 v-if 包裹 v-for），减少浏览器负担。
Tools & Concepts Used
- Vue 3 +
script setup语法 ref()/reactive()（响应式数据）computed()（计算属性）watch()（监听器）onMounted()（生命周期钩子）v-model（双向绑定）v-if/v-else/v-for（条件与列表渲染）:class/:id（属性绑定）@click（事件监听）
Common Pitfalls
- 混淆
v-if与v-show（后者仅隐藏，不销毁 DOM）。 - 在
v-for同级使用v-if，导致性能浪费。 - 未使用
ref()直接在模板中使用复杂对象，导致响应式失效。 - 在
computed中执行副作用操作（如网络请求），应使用watch。 - 忽略生命周期钩子的执行时机，导致初始化失败。
Practice Suggestions
- 重构 To-Do List：添加“编辑”功能、本地存储（localStorage）持久化。
- 实现搜索过滤：使用
computed根据输入动态过滤列表。 - 构建登录表单：结合
v-model、v-if、watch实现登录状态控制。 - 模拟购物车：使用
computed计算总价、数量，使用watch同步到服务器。