从后端拼模板到 Vue 响应式：前端界面的三次进化-编程实验室

从后端拼模板到 Vue 响应式：一场前端界面的进化史

当开始学习前端开发时，很多人都会遇到一个共同的困惑：
为什么有的项目让后端直接返回 HTML？

为什么后来大家都开始使用 fetch 拉取 JSON？

而现在又流行 Vue 的响应式界面，几乎不再手动操作 DOM？

这些不同的方式看似杂乱，其实背后隐藏着一条非常清晰的技术发展路径。后端渲染 → 前端渲染 → 响应式渲染它们不是独立出现的，而是前端能力逐步增强、分工越来越明确后的必然产物。

1. 🌱 第一阶段：后端拼模板 —— “厨师把菜做好端到你桌上”

让我们从你最初的 Node.js 服务器代码说起。

访问1314端口，得到的结果：

这段代码非常典型，体现了早期 Web 的模式：

用户访问/users
后端读取数据
后端拼出 HTML
后端把完整页面返回给浏览器

你可以把它理解成：

用户去餐馆点菜 → 厨房（后端）把菜做好 → 端到你桌上（浏览器）

整个过程中，浏览器不参与任何加工，它只是“展示已经做好的菜”。

🔍 后端拼模板的特点

特点	说明
后端掌控视图	HTML 是后端生成的
数据和页面耦合在一起	改数据就要改 HTML 结构
刷新页面获取新数据	无法局部更新
用户体验一般	交互不够流畅

这种方式在早期 Web 非常普遍，就是典型的 MVC：

M（Model）：数据
V（View）:HTML 模板
C（Controller）：拼 HTML，返回给浏览器

“后端拼模板”就像饭店里：

厨师（后端）把所有食材（数据）做成菜（HTML）
顾客（浏览器）只能被动接受

这当然能吃饱，但吃得不灵活。

为了吃一个小菜，还要大厨重新做一桌菜！

这就导致页面每个小变化都得刷新整个页面。

2. 🌿 第二阶段：前后端分离 —— “厨师只给食材，顾客自己配菜”

随着前端能力提升，人们发现：

让后端拼页面太麻烦了。

于是产生了前后端分离。

🔸 后端从“做菜”变成“送食材”（只返回 JSON）

{ "users": [ { "id": 1, "name": "张三", "email": "123@qq.com" }, { "id": 2, "name": "李四", "email": "1232@qq.com" }, { "id": 3, "name": "王五", "email": "121@qq.com" } ] }

JSON Server 会把它变成一个 API：

GET http://localhost:3000/users

访问该端口得到：

访问时返回纯数据，而不再返回 HTML。

🔸 前端浏览器接管“配菜”（JS 渲染 DOM）

浏览器自己：

发送 fetch 请求
拿到 JSON
用 JS 拼 HTML
填入页面

这就好比：

后端：不做菜，只把干净的食材准备好（纯 JSON）
前端：自己按照 UI 要求把菜炒出来（DOM 操作）
双方分工明确，互不干扰

这就是现代 Web 最主流的模式 ——前后端分离。

🚧 但问题来了：DOM 编程太痛苦了

你看这段代码：

tbody.innerHTML = data.map(user => ` <tr>...</tr> `).join('');

是不是很像在手工组装乐高积木？

DOM 操作会遇到几个痛点：

代码又臭又长
更新数据要重新操作 DOM
状态多了之后难以维护
页面结构和业务逻辑混在一起

前端工程师开始苦恼：

有没有一种方式，让页面自动根据数据变化？

于是，Vue、React、Angular 出现了。

3. 🌳 第三阶段：Vue 响应式数据驱动 —— “只要食材变化，餐盘自动变化”

Vue 的核心理念：

ref 响应式数据，将数据包装成响应式对象
界面由 {{}} v-for 进行数据驱动
专注于业务，数据的变化而不是 DOM

这是前端的终极模式 ——响应式渲染。

🔥 Vue 的思想

Vue 做了三件事：

把变量变成“会被追踪的数据”（ref / reactive）
把 HTML 变成“模板”（用 {{ }}、v-for）
让数据变化自动修改 DOM

你只需要像写伪代码一样描述业务：

<script setup> import { ref, onMounted // 挂载之后 } from 'vue' const users = ref([]); // 在挂载后获取数据 onMounted(() =>{ fetch('http://localhost:3000/users') .then(res => res.json()) .then(data => { users.value = data; }) }) </script>

而页面模板：

<tr v-for="u in users" :key="u.id"> <td>{{ u.id }}</td> <td>{{ u.name }}</td> <td>{{ u.email }}</td> </tr>

得到的结果为：

你不再需要：

querySelector
innerHTML
DOM 操作

Vue 会自己完成这些工作。

如果传统 DOM：

你要把所有食材手动摆到盘子里。

那么Vue：

你只需要放食材到盘子里（修改数据），
餐盘的摆盘会自动变化（界面自动更新）。

比如你修改了数组：

users.value.push({ id: 4, name: "新用户", email: "xxx@qq.com" });

页面会自动新增一行。

你删除：

users.value.splice(1, 1);

页面自动少一行。

你完全不用动 DOM。

4. 🌲 三个阶段的对比

阶段	数据从哪里来？	谁渲染界面？	技术特征
1. 后端渲染（server.js）	后端	后端拼 HTML	模板字符串、MVC
2. 前端渲染（index.html + db.json）	API / JSON	前端 JS DOM	Fetch、innerHTML
3. Vue 响应式渲染	API / JSON	Vue 自动渲染	ref、{{}}、v-for

本质是渲染责任的迁移：

后端渲染 → 前端手动渲染 → 前端自动渲染

最终目标只有一个：

让开发者把时间花在业务逻辑，而不是重复性 DOM 操作上。

5. 🍁 为什么现代开发必须用前后端分离 + Vue？

最后，让我们用一句最通俗的话总结：

后端拼页面像“饭店厨师包办一切”，效率低。

前端手动拼 DOM 像“自己做饭”，累到爆。

Vue 像“智能厨房”，你只需要准备食材（数据）。

Vue 的三大优势

1）极大减少开发成本

业务逻辑变简单：

users.value = newUsers;

就够了，UI 自动更新。

2）更适合大型项目

组件化
模块化
状态集中管理
可维护性高

3）用户体验更好

页面不刷新
更新局部
响应迅速

6. 🌏 文章总结：从“厨房”看前端的进化历史

最终，我们回到开头的类比：

阶段	类比
第一阶段：后端拼模板	厨房（后端）做好所有菜，直接端给你
第二阶段：前端渲染	厨房只提供食材，你自己炒
第三阶段：Vue 响应式	智能厨房：只要食材变，菜自动做好

前端技术每一次进化，都围绕同一个核心目标：