当前位置：首页 > news >正文

前端框架演进史：从 jQuery 到 Vue，一场持续十五年的变革

news 2026/5/8 22:10:05

一、前言

前端开发从二十多年前的静态页面，一路演进到如今工程化、组件化的现代框架生态，变化翻天覆地。这条路从 jQuery 的 DOM 操作起步，经历了 Backbone 的 MVC 启蒙、AngularJS 的双向绑定、React 的虚拟 DOM，再到如今 Vue 为代表的渐进式框架，每一个阶段都解决了一个时代的痛点。

二、石器时代：原生 JavaScript 与 jQuery

2.1 原生 JS 的痛点

在 jQuery 出现之前，前端开发是一个充满琐碎细节的体力活。操作 DOM 要手动遍历、兼容不同浏览器的事件模型、用 XMLHttpRequest 发请求要写大量模板代码。一个简单的 AJAX 请求在不同的 IE 版本上可能需要不同的代码分支。

而 CSS 选择器在当时也没有统一的标准，很多样式要 jQuery 帮忙才能精确定位到元素。

2.2 jQuery 的崛起

2006 年，John Resig 发布了 jQuery，它的核心理念可以概括为 "Write Less, Do More"。通过 $ 符号和链式调用，开发者可以用极简的语法完成复杂的 DOM 操作：

$("#btn").on("click", function() {$(this).addClass("active").siblings().removeClass("active");
});

同时，jQuery 统一了浏览器 API 差异，解决了 Ajax、事件绑定、DOM 操作等大量兼容问题。到 2010 年左右，互联网上超过 70% 的网站都在使用 jQuery，几乎成为前端开发的标配。

但 jQuery 本质上仍是 "命令式" 的 DOM 操作库——你要告诉浏览器具体怎么做：先找到这个元素、再改它的样式、再绑定事件。随着页面复杂度增加，这种模式导致了著名的 "意大利面条式代码"（Spaghetti Code）。

三、MVC 时代：Backbone 与 AngularJS

3.1 Backbone.js 的 MVC 启蒙

2010 年，Backbone.js 出现，它将前端的关注点拆分为 Model（数据模型）、View（视图）、Collection（集合）和 Router（路由）。这是前端第一次有了 "架构" 的概念，不再是漫无目的地操作 DOM。

但 Backbone 的 View 仍然需要手动渲染和更新，只是在组织代码的层面上做了改进，底层依然是 jQuery 的 DOM 操作。

3.2 AngularJS 的双向绑定革命

同年，谷歌发布了 AngularJS（Angular 1.x），引入了真正改变游戏规则的概念——双向数据绑定。开发者不再需要手动操作 DOM，只要修改 JavaScript 中的数据，视图会自动更新；反过来视图的变化也会同步到数据。

<div ng-app="" ng-controller="ctrl"><input ng-model="name"><p>Hello, {{ name }}!</p>
</div>

AngularJS 还带来了依赖注入、指令系统、路由、过滤器等完整的框架能力。它的问题也很明显：$scope 继承体系复杂、脏检查性能在大数据量下吃力、版本升级几乎是重写。

四、React 与虚拟 DOM

4.1 React 的诞生

2013 年，Facebook 开源了 React，带来了完全不同的思路——组件化 + 虚拟 DOM。React 的核心哲学是：UI 是数据的纯函数映射。开发者只需关心 "数据变成什么 UI"，而不用操心 "怎么更新 UI"。

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}

虚拟 DOM（Virtual DOM）是在内存中维护一个轻量的 DOM 树副本，每次状态变化时先在虚拟 DOM 上做 diff 比较，然后批量更新真实 DOM 中变化的部分。这个机制大幅提升了渲染性能。

4.2 JSX 与单向数据流

JSX 让 HTML 风格的模板写法可以直接嵌入 JavaScript，组件之间的数据传递采用单向数据流（props 从父到子），数据流向清晰可预测。配合 Flux/Redux 等状态管理方案，复杂应用的状态也变得可追踪、可调试。

React 的生态系统也催生了 React Native（跨平台移动开发）、Next.js（服务端渲染）、React Hooks（函数组件状态管理）等一系列创新。

五、Vue.js 的渐进式哲学

5.1 渐进式框架的设计理念

2014 年，尤雨溪（Evan You）发布了 Vue.js。Vue 的核心理念是 "渐进式"（Progressive）——你不用一次性引入整个框架，可以用一个脚本标签开始，也可以逐步引入路由、状态管理、构建工具，最终构建一个完整的大型应用。

这种设计让 Vue 的学习曲线非常平缓。一个小页面只要在 HTML 中引入 CDN 链接就能跑起来，一个大型项目可以配合 Vue CLI / Vite + Vue Router + Pinia + TypeScript 组成完整的工程化方案。

5.2 响应式数据与模板语法

const app = Vue.createApp({data() {return { count: 0 }},methods: {increment() { this.count++ }}
});
app.mount("#app");

Vue 的响应式系统（Vue 2 用 Object.defineProperty，Vue 3 用 Proxy）让数据变化自动驱动视图更新，开发者只需关注数据逻辑。

5.3 单文件组件（SFC）

Vue 引入了 .vue 单文件组件，将模板（template）、逻辑（script）、样式（style）放在同一个文件中，内聚性好、方便维护。配合 <script setup> 语法糖和 Composition API，代码更简洁、逻辑复用更方便。

<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script><template><button @click="count++">{{ count }}</button>
</template>