Vue 3：用响应式思维搭建可维护界面 · 框架工程

WHY IT MATTERS

先用一句白话理解

Vue 的响应式系统像订阅了数据的仪表盘：某个读数变化时，只有依赖它的仪表需要刷新，你只需声明依赖关系。

LEARNING OUTCOMES

学完你能做到什么

熟练使用 SFC、模板语法、Props、Emits 与 Slot

理解 ref、reactive、computed 和 watch 的边界

用 Composition API 与 Composable 复用业务能力

完成路由、异步组件、Transition 和 TypeScript 集成

能解释 Vue 响应式与渲染更新的基本机制

CONCEPT DEEP DIVE

把每个核心概念讲透

不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。

01CORE CONCEPT

单文件组件

先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建包含订单、客户、图表、筛选器和权限菜单的数据运营后台。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

02CORE CONCEPT

模板与指令

03CORE CONCEPT

ref 与 reactive

04CORE CONCEPT

computed 与 watch

05CORE CONCEPT

Props、Emits 与 Slot

06CORE CONCEPT

Composition API

07CORE CONCEPT

Composable

08CORE CONCEPT

Vue Router

09CORE CONCEPT

Transition、Teleport 与 Suspense

CONCEPT MAP

这一章的学习步骤

1单文件组件

2模板与指令

3ref 与 reactive

4computed 与 watch

5Props、Emits 与 Slot

6Composition API

7Composable

8Vue Router

9Transition、Teleport 与 Suspense

STEP 01

完成可筛选的订单表格和编辑表单

STEP 02

把分页、筛选与请求状态提取为 Composable

STEP 03

用插槽设计可复用数据表格

STEP 04

为路由切换和异步内容加入可访问的过渡反馈

HANDS-ON PROJECT

动手任务

PROJECT BRIEF

构建包含订单、客户、图表、筛选器和权限菜单的数据运营后台。

交付清单

✓组件通信关系图
✓至少三个带类型的 Composable
✓响应式陷阱排查记录

MINIMUM RUNNABLE CODE

可直接放进 Vue 项目的任务筛选组件

vue

<script setup lang="ts">
import { computed, ref } from "vue";

const keyword = ref("");
const tasks = ref(["学习 ref", "理解 computed", "完成项目"]);
const visibleTasks = computed(() =>
  tasks.value.filter((task) => task.includes(keyword.value)),
);
</script>

<template>
  <label>
    搜索任务
    <input v-model="keyword" />
  </label>
  <ul>
    <li v-for="task in visibleTasks" :key="task">{{ task }}</li>
  </ul>
</template>

先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。

DELIBERATE PRACTICE

三级练习：从复现到生产

每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。

LEVEL 1 · 基础复现

让核心机制第一次跑通

完成可筛选的订单表格和编辑表单
把分页、筛选与请求状态提取为 Composable
用插槽设计可复用数据表格
为路由切换和异步内容加入可访问的过渡反馈

LEVEL 2 · 独立改造

改变约束，验证你真的理解

不看教程，独立完成：熟练使用 SFC、模板语法、Props、Emits 与 Slot
不看教程，独立完成：理解 ref、reactive、computed 和 watch 的边界
不看教程，独立完成：用 Composition API 与 Composable 复用业务能力
不看教程，独立完成：完成路由、异步组件、Transition 和 TypeScript 集成
不看教程，独立完成：能解释 Vue 响应式与渲染更新的基本机制

LEVEL 3 · 生产挑战

把实验变成能交付的工程

组件通信关系图
至少三个带类型的 Composable
响应式陷阱排查记录
检查缓存、Hydration、错误恢复、可观测性和部署约束，并把检查结果写进项目复盘。

COMMON PITFALLS

最容易踩的坑

随意解构 reactive 对象导致响应性丢失

用 watch 复制本可由 computed 得到的数据

让一个 SFC 同时承担请求、规则、布局和所有交互

为了语法短而牺牲明确的 Props 与 Emits 类型

SELF CHECK

先回答，再展开参考答案

Q01这一课最核心的业务目标是什么？＋

从单文件组件和模板出发，通过一个运营后台掌握 Composition API、响应式系统、组件通信、路由、过渡动画与 TypeScript。

Q02如果只能保留三个验收结果，应该保留什么？＋

组件通信关系图；至少三个带类型的 Composable；响应式陷阱排查记录

Q03学习过程中最需要主动避免什么？＋

随意解构 reactive 对象导致响应性丢失；用 watch 复制本可由 computed 得到的数据；让一个 SFC 同时承担请求、规则、布局和所有交互；为了语法短而牺牲明确的 Props 与 Emits 类型

Q04怎样证明你不是“看懂了”，而是真的会做？＋

独立完成“构建包含订单、客户、图表、筛选器和权限菜单的数据运营后台。”，并用测试、数据或运行结果逐项验收交付清单。

PRODUCTION READINESS

本课完成检查表

全部能打勾，再进入下一课。

□目标明确：熟练使用 SFC、模板语法、Props、Emits 与 Slot
□核心机制已用最小实验验证：完成可筛选的订单表格和编辑表单
□风险已检查：随意解构 reactive 对象导致响应性丢失
□风险已检查：用 watch 复制本可由 computed 得到的数据
□风险已检查：让一个 SFC 同时承担请求、规则、布局和所有交互
□风险已检查：为了语法短而牺牲明确的 Props 与 Emits 类型
□交付物可复现：组件通信关系图
□交付物可复现：至少三个带类型的 Composable
□交付物可复现：响应式陷阱排查记录

PRIMARY SOURCES

继续深入的官方资料

Vue 3 官方指南 Vue 官方工具链指南 Vue 官方发布策略

课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。