前端培训 — Session 4

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 同步到服务器。