第 1 章 引言

从前端演进、MVC到MVVM出发，对照Vue、React和Angular的数据流、虚拟DOM、模板与学习成本。

直觉：先画状态、身份与交付链

从前端演进、MVC到MVVM出发，对照Vue、React和Angular的数据流、虚拟DOM、模板与学习成本。 框架选择不是语法偏好，而是数据流、视图更新、组件边界和团队成本之间的系统权衡。 真正掌握本页，不是让一次演示碰巧得到正确截图，而是能解释输入从哪里来、谁拥有可变状态、哪次事件触发更新、失败后如何停止，以及组件和外部资源何时释放。先预测：只看最终页面，最容易遗漏哪条陈旧请求、重复事件或错误身份？

权威目录定位

本书依据清华大学出版社官方书目与官方目录核对：刘汉伟著，2019年4月出版，ISBN 9787302523888。原书处于Vue 2、Vue CLI、Vuex和当时webpack的技术语境；Vue 3、Pinia、Vite或Nuxt只会作为明确的迁移注记，不会冒充原书正式分节。

本页按官方目录顺序逐项覆盖 18 个公开条目；目录名称只用于一对一追踪，正文为独立教学重构。

  • 1.1 前端技术的发展
  • 1.1.1 从静态走向动态
  • 1.1.2 从后端走向前端
  • 1.1.3 从前端走向全端
  • 1.2 MVVM族员——Vue.js
  • 1.2.1 从MVC到MVVM
  • 1.2.2 Vue.js简介
  • 1.3 Vue与React
  • 1.3.1 虚拟DOM
  • 1.3.2 功能性组件
  • 1.3.3 轻量级——将与核心库无关的业务封装成独立库
  • 1.3.4 视图模板
  • 1.3.5 其他
  • 1.4 Vue与Angular
  • 1.4.1 模板语法
  • 1.4.2 脏检测
  • 1.4.3 双向数据绑定
  • 1.4.4 学习曲线

核心概念与所有权

、、、、。 这些概念不是孤立名词：每一个都要回答“输入由谁创建、状态保存在哪里、哪个事件可以修改、失败如何传播、离开页面后由谁清理”。

#概念工程含义
1MVVM以视图模型协调状态与视图，让界面通过声明式绑定响应数据变化的架构模式。
2虚拟DOM用JavaScript对象描述界面树，并通过差异计算把必要变更提交到真实DOM。
3数据绑定把状态读取与视图表达式连接起来，并在状态变化时驱动界面更新的机制。
4功能性组件主要依据输入生成界面、尽量减少内部可变状态和外部副作用的组件。
5框架边界核心库、路由、状态管理和构建工具各自承担的责任范围。

机制拆解

1. 从页面拼接到状态驱动

静态页面把内容、样式和行为写死在文档中；动态页面加入脚本后，若仍直接操作DOM，状态会散落在节点和回调里。MVVM把可变事实收回到数据模型，视图只声明如何读取状态，更新路径因此可以追踪。

先预测：若省略这一层，状态、组件身份、异步任务或构建产物会在哪里首次偏离？

2. 比较框架要比较更新契约

Vue的模板、React的函数式视图和Angular的完整平台都在回答同一问题：状态变化后，谁确定更新范围，组件如何通信，扩展能力放在哪里。虚拟DOM只是实现手段，不能替代对数据流、调试成本和团队约束的比较。

先预测：若省略这一层，状态、组件身份、异步任务或构建产物会在哪里首次偏离？

3. 轻量核心与生态责任

核心库保持轻量意味着路由、状态管理和构建能力由独立模块提供。好处是按需组合，代价是团队必须定义版本、边界和升级策略。签发框架方案时要记录业务规模、交互复杂度、SEO需求和成员经验。

先预测：若省略这一层，状态、组件身份、异步任务或构建产物会在哪里首次偏离？

三阶段可视化推演

最小可运行实验

下面的最小实现聚焦本页核心。先在独立页面运行，再加入空输入、快速重复操作和销毁重建；不要直接把演示代码当成完整生产方案。

const decision = {
  view: "Vue template",
  stateFlow: "one-way down, events up",
  routing: "vue-router",
  store: "Vuex when shared state is justified",
};
 
console.table(decision);

证据记录必须同时保存目录坐标、运行时和状态摘要：

book: Vue.js从入门到项目实战
page: vjp-01-introduction
sample: normal | boundary | failure | recovery
runtime: Vue 2.x + pinned toolchain
input_fixture: fixed
first_divergence: null
cleanup_complete: true

故障脚本保持一次只改变一个变量：

baseline -> run_same_input
inject -> stale-state | duplicate-event | denied-resource | broken-build
observe -> stop_at_first_divergence
recover -> clear_fault_and_replay
assert -> one_state_owner && stable_output && no_stale_task && no_resource_leak

常见误区与故障注入

验收矩阵

样本输入与环境变化预期状态通过条件
正常合法数据、稳定身份、固定版本完成主链输出与状态摘要一致
边界空值、极限数量、快速重复事件有界退化不越界、不重复、不阻塞
失败请求拒绝、旧缓存、资源缺失首偏离点停止错误显式传播或降级
恢复清除故障后重放同一输入收敛到正常轨迹无陈旧任务和资源泄漏

本页签发不变量是：框架选择的输入假设、状态所有者、更新路径和生态责任都可解释，比较结论能够被同一业务样本复现。 单次成功、平均耗时或最终截图不能代替运行时版本、事件轨迹、首偏离点和清理证据。

练习

小结

  • MVVM：以视图模型协调状态与视图，让界面通过声明式绑定响应数据变化的架构模式。
  • 虚拟DOM：用JavaScript对象描述界面树，并通过差异计算把必要变更提交到真实DOM。
  • 数据绑定：把状态读取与视图表达式连接起来，并在状态变化时驱动界面更新的机制。
  • 功能性组件：主要依据输入生成界面、尽量减少内部可变状态和外部副作用的组件。
  • 框架边界：核心库、路由、状态管理和构建工具各自承担的责任范围。
  • 本页已经把官方目录、机制链、最小实现、故障注入和恢复证据放在同一条验收路径上。
  • 原书Vue 2技术语境与现代迁移说明保持清晰边界。

术语表

来源与改编边界

官方目录：https://www.tup.com.cn/bookscenter/bookcatalog?id=08226301

复习本章（6 题）

讨论

评论区加载中…