从模板拼接到响应式更新：前端渲染范式的三次跃迁

ohyeah
49 阅读5分钟

在当今的前端开发中，我们早已习惯于“数据变了，界面自动更新”的开发体验。无论是 Vue 的 ref、还是React 的 useState，背后都隐藏着一个统一的理念：用数据驱动视图，而非手动操作 DOM。

但这一看似理所当然的范式，并非天生如此。它经历了三次关键跃迁：后端模板渲染 → 前端手动 DOM 操作 → 响应式自动更新。每一次跃迁，都是对开发效率、可维护性与用户体验的深度优化。本文将通过三个真实代码片段，还原这段演进历程，并揭示其背后的工程哲学。

第一次跃迁：后端 MVC —— 数据在服务端驱动 HTML

早期 Web 应用的核心思想是“请求-响应”模型。用户访问一个 URL，服务器返回完整的 HTML 页面。这种模式下，页面生成完全由后端控制，典型的架构是 MVC：

  • Model：数据库中的用户记录；
  • View：包含占位符（如 {{name}}）的 HTML 模板；
  • Controller：接收请求、查询数据、渲染模板。

代码示例：Node.js 手写 HTTP 服务

// demo1/server.js
const http = require('http');
const url = require('url');

const users = [
  { id: 1, name: '舒老板', email: '123@qq.com' },
  { id: 2, name: '陈总', email: '666@qq.com' },
  { id: 3, name: '徐老板', email: '888@qq.com' }
];

const server = http.createServer((req, res) => {
  const parsedUrl = url.parse(req.url, true);
  
  if (parsedUrl.pathname === '/' || parsedUrl.pathname === '/users') {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/html;charset=utf-8');
    res.end(generateUserHTML(users)); // 一次性返回完整 HTML
  } else {
    res.statusCode = 404;
    res.end('Not Found');
  }
});

function generateUserHTML(users) {
  const rows = users.map(u => `
    <tr>
      <td>${u.id}</td>
      <td>${u.name}</td>
      <td>${u.email}</td>
    </tr>
  `).join('');
  
  return `
    <!DOCTYPE html>
    <html>
    <body>
      <h1>Users</h1>
      <table><tbody>${rows}</tbody></table>
    </body>
    </html>
  `;
}

server.listen(1234);

特点与局限

  • ✅ 简单可靠：一次请求，完整页面，天然 SEO 友好。
  • ❌ 前后端强耦合：前端无法独立开发或调试 UI。
  • ❌ 交互体验差：任何操作（如翻页、筛选）都需要刷新整个页面。
  • ❌ 重复渲染开销大：即使只改一个字段，也要重新生成整页 HTML。

这一阶段的“数据驱动”，本质是字符串模板替换，发生在服务端，与客户端动态交互无关。

第二次跃迁：前后端分离 —— 前端开始“接管”界面

随着 AJAX 和 RESTful API 的普及，Web 应用进入前后端分离时代。后端只提供 JSON 数据接口，前端通过 fetch 获取数据，并手动操作 DOM 更新界面。

代码示例：原生 JS + json-server

后端（db.json）：

{
  "users": [
    { "id": 1, "name": "舒俊", "email": "123@qq.com" },
    { "id": 2, "name": "陈俊璋", "email": "1232@qq.com" },
    { "id": 3, "name": "徐行", "email": "121@qq.com" }
  ]
}

启动命令：

npx json-server --watch db.json --port 3000

前端（index.html）：

<table>
  <thead><tr><th>ID</th><th>Name</th><th>Email</th></tr></thead>
  <tbody></tbody>
</table>

<script>
fetch('http://localhost:3000/users')
  .then(res => res.json())
  .then(data => {
    document.querySelector('tbody').innerHTML = data.map(user => `
      <tr>
        <td>${user.id}</td>
        <td>${user.name}</td>
        <td>${user.email}</td>
      </tr>
    `).join('');
  });
</script>

进步与新痛点

  • ✅ 解耦成功：前后端可并行开发，接口契约清晰。
  • ✅ 局部更新：无需整页刷新，用户体验提升。
  • ❌ DOM 操作繁重：开发者需频繁使用 querySelector、innerHTML、appendChild。
  • ❌ 状态管理混乱：数据分散在多个变量中，难以追踪变化。

此时，前端虽然“独立”了，却陷入了命令式编程的泥潭——开发者必须精确描述“如何一步步构建界面”，而非“界面应该长什么样”。

第三次跃迁：响应式框架 —— 声明式 + 自动同步

现代前端框架（如 Vue 3）通过响应式系统和声明式模板，彻底解放了开发者：

  • 你只需定义“数据是什么”；
  • 框架自动建立“数据 → 视图”的映射关系；
  • 当数据变化，视图自动、高效、安全地更新。

代码示例：Vue 3 的响应式用户列表

<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>

<template>
  <table>
    <thead>
      <tr><th>ID</th><th>Name</th><th>Email</th></tr>
    </thead>
    <tbody>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </tbody>
  </table>
</template>

响应式如何工作？

  1. ref() ：将普通数组包装为响应式对象，内部通过 Proxy 或 Object.defineProperty 劫持读写。
  2. 模板编译：<template> 被编译为渲染函数，执行时会收集依赖（哪些数据被用了）。
  3. 依赖追踪：当 users.value 被修改，所有依赖它的组件自动重新渲染。
  4. 虚拟 DOM Diff：仅更新实际变化的 DOM 节点，避免全量重绘。

你甚至可以动态添加数据：

setTimeout(() => {
  users.value.push({ id: 4, name: '王老板', email: '333@qq.com' });
}, 2000);

表格自动新增一行，无需任何 DOM 操作！

核心优势

  • ✅ 聚焦业务逻辑：不再关心“怎么更新 DOM”，只关注“数据该是什么”。
  • ✅ 声明式表达：模板直观描述 UI 结构，符合人类直觉。
  • ✅ 状态集中可控：所有数据变更可追踪、可预测。
  • ✅ 性能与安全内置：自动优化更新，模板插值默认防 XSS。

范式演进的本质：从“How”到“What”

阶段开发者关注点编程范式抽象层级
后端模板“如何拼接 HTML 字符串”命令式（服务端）低
手动 DOM“如何查找节点、设置内容”命令式（客户端）低
响应式框架“UI 应该呈现什么数据”声明式高

这三次跃迁，本质上是抽象层级的不断提升。每一次进步，都让开发者离“业务本身”更近一步，离“机器细节”更远一步。

正如计算机科学先驱 Alan Kay 所言：“真正优秀的技术，是那些让你忘记它存在的技术。 ” 响应式框架正是如此——它默默处理了所有更新逻辑，让你只需专注于“用户看到什么”。

结语：理解历史，方能驾驭未来

从 res.end(html) 到 users.value = data，前端渲染方式的演进，是一部不断降低认知负荷、提升开发幸福感的历史。

今天，我们站在 Vue、React 等成熟框架的肩膀上，享受着“数据即视图”的优雅。但若不了解其背后的演进逻辑，就容易陷入“只会用，不懂为何这样设计”的困境。

理解这段历史，不仅能帮助你更好地使用现代框架，更能让你在面对新挑战（如微前端、跨端开发、状态管理）时，抓住不变的核心：以数据为中心，让界面随其自然流动。

愿你在代码的世界里，少写 DOM，多写价值。

avatar
文章
阅读
粉丝