第 1 章 从数据到视图

第 1 章 · 从数据到视图

章节摘要：本章解决两个问题——Vue 是什么、怎么把它装起来跑通第一个应用；以及借这个最小应用，第一次完整预览"数据变化如何变成 DOM 更新"的渲染管线全貌。读完你能独立搭建 Vue 开发环境，并说清楚声明式渲染与传统命令式操作 DOM 的本质区别。

学习目标

阅读完本章，你应当能够：

1. 说清 Vue 的定位：渐进式框架、核心库只管视图层，生态按需叠加；
2. 根据项目规模选择 CDN 引入、Vite 脚手架或 Vue CLI 三种安装方式；
3. 跑起第一个交互式应用，并逐行解释根实例、模板、数据三者的关系；
4. 用"渲染管线"的视角描述一次点击更新视图的完整过程；
5. 区分声明式与命令式两种范式，理解 Vue 为何选择前者。

核心概念速览

你描述"界面应该长什么样"，Vue 负责"怎么变成那样"——这就是声明式渲染，也是整条管线的起点契约。

什么是 Vue：渐进式的真实含义

Vue 的官方自述是"渐进式 JavaScript 框架"，这个词被说滥了，但它确实精确。渐进式意味着你可以只用它最核心的视图层能力——一个页面上的倒计时、一段表单联动——而不必接受它的全家桶；项目长出需求了，再把 Vue Router 管路由、Pinia 或 Vuex 管状态、Vite 管构建逐层加上来。核心库始终只有几十 KB，用的深度由你决定。

Vue 的三大支柱恰好对应渲染管线的三站：响应式系统负责知道数据变了，模板编译负责把界面描述变成可执行的渲染函数，虚拟 DOM 负责把新描述高效落到页面上。本章先不展开原理，只让你在每个例子运行时心里带着这张地图。

与传统 jQuery 时代的命令式开发对比：命令式是你亲手找到某个节点、亲手改它的文本，步骤即代码；声明式是你声明"这个位置显示 message 变量"，之后 message 变了界面自动跟着变。前者直观但状态一多就失控，后者把"同步"这个最容易出 bug 的环节交给了框架。

子章节导航

1.1 安装与起步

三种安装方式的选型、第一个应用的完整代码，以及用浏览器开发者工具观察一次数据驱动的 DOM 更新。

子章节之间的逻辑关系

本章是全册的"开机自检"：先装好环境跑通最小例子，再带着管线全景图进入第 2 章响应式系统的内部。

第1章 装机+全景预览
   │
   ├─→ 第2章 响应式系统（管线第一站：谁在读数据）
   └─→ 第3章 模板编译（管线第二站：模板如何可执行）
​

前置知识与后续延伸

• 前置：HTML、CSS、JavaScript 基础（懂事件、对象、数组即可，不必精通）；
• 为后续铺路：本章建立的"数据变化驱动视图"直觉，是第 2 章依赖收集、第 4 章 patch 流程反复回引的参照系。