Vue.js 十周年，喜欢了很久的框架出息了_AI阅读总结 — 包阅AI

00. 写在前面

大家好，我是大家的林语冰。

不久前，Vue 大会 2024 在我国深圳顺利举行，恰逢 Vue.js 十周年诞辰。

“Vue 之父”携手 Vue 团队共同出席了本场前端盛宴，“Vitest 之父”、“Pinia 之父”等重量级嘉宾还共享了 Vue 生态的精彩演讲。

蓦然回首，这个本人喜欢了很久的前端框架，竟然已经 10 岁了！毫不夸张地说，现在我们手中某台设备里的 Web App，可能就是借助 Vue.js 实现的。

本期我们就一起来细品 Vue 历时十年的登神长阶 —— Vue 生态中的 世界第一 和 世界唯一。

01. Vue 的“革命之路”

本次大会中，尤大的演讲主题是《面向未来的 Vue 和 Vite》，个人印象最深刻的是 Vue 的十周年简史及其前端生态革命。

Vue 简史在近几年 Vue 3 的市场营销中或多或少都有科普，这里我们就直接共享一张 Vue 进化史的图片，一图胜千言。

关于 Vue 之于前端生态的开源革命，尤大则特别分享了 Vue 生态的各种“先锋实验”：

• 第一个提出并贯彻“渐进式理念”的框架
• 第一个实现 深度依赖追踪 的框架
• 第一个实现 构建工具 + SFC 的框架
• 第一个实现显式依赖追踪 + 现代组件模型的框架
• 第一个探索 Signals 编译语法糖 的框架
• 唯一一个同时支持 SFC + JSX 的框架

这些 Vue 生态中“世界第一”或“世界唯一”的框架亮点不好理解，下文我们就通过代码来进阶学习。

02. 渐进式框架

Vue 自诞生起就被打上“渐进式框架”的标签，是世界上第一个、也是目前唯一一个深入贯彻该设计理念的框架。

渐进式 的意思是，Vue 本质上是一款构建 UI 的 JS 框架，开发者不必一开始就 all in “Vue 全家桶”，而可以选择渐进式集成官方库或工具链。

举个栗子，Vue 官方的状态管理库是 Pinia，但对于轻量 Web App，组合式 API 足以满足你的基本需求。

可以看到，你不需要掌握 Pinia，也能开始使用 Vue。

更骚的是，只要你愿意，你还可以在 Vue 里集成 Redux，因为 Redux 和 Vue 响应式模块本身是低耦合的。

同时，你可以在旧项目中无缝迁移到 Vue，比如渐进式重构 jQuery 的 代码屎山；也可以在新项目中沉浸式体验 Vue，进行快速原型开发。

此外，Vue 允许我们自定义渲染器。

这意味着，渐进式的优势还体现在跨平台方面，比如 WebGL 或小程序渲染，这也有利于微前端等新型架构。

总而言之，渐进式框架 的优势包括但不限于：

• 渐进增强的 HTML，允许作为 Web Components 嵌入
• 同时支持 SPA（单页应用）+ MAP（多页应用）
• 跨平台渲染，支持 PC 端、小程序、WebGL 等

03. 细粒度响应性

如果说 Knockout 是前端领域中的“响应性鼻祖”，那么 Vue 则是细粒度响应性的巅峰战力。

虽然 Vue 不是第一个支持细粒度响应性（Signals）的前端框架，但 Vue 却是第一个实现 深度依赖追踪 的框架。

早期的响应式框架缺乏 JS 元编程的语法支持，Knockout 想实现深度响应性估计也有心无力，而且还涉及性能开销的权衡。

语冰的个人心证是，Vue 成熟的响应性系统既是“框架造时代”、也是“时代造框架”的产物。

ES5 的 Object.defineProperty() API 为 Vue 2 提供了深度响应性的基本语法支持，如今 Vue 3 更进一步，响应性系统依赖于 ES6 的 Proxy 内置对象来实现，更加强大且优雅。

关于 Vue 4，我有一个大胆但科学的预言 —— Vue 4 的响应式原理会拥抱 Signals（如果 JS 的新提案顺利通过的话）。

举个栗子，ref() 默认采用深层响应性，支持嵌套对象等数据结构。

可以看到，即使改变的是嵌套对象，深层属性的异动也会被 Vue 精准检测。

一方面，Vue 的深度响应性系统让状态管理符合直觉；但另一方面，这也可能导致性能瓶颈，这也是 watch() 等 API 默认不是深度响应式的原因之一。

为此，Vue 提供了浅层响应性系统完成自我救赎，比如 shallowRef() API：

可以看到，面对大数据的场景，深层响应性的所有嵌套属性都会触发依赖追踪，这里使用浅层响应性可以优化性能。

React 令人诟病的缺陷之一是 React is not reactive（React 不是响应式的），甚至因此催生了 React 备胎 —— Preact 的诞生，而新版 Angular 也决定切换赛道到 Signals。

如今细粒度响应式已经成为前端框架的主流范式之一，TC39 也在推动 Signals 提案的标准化。

作为第一个实现深度依赖追踪的框架，Vue 天然符合 Signals 范式，未来 Vue + Signals 的新型响应式原理应该不会造成破坏性更新。

04. SFC + JSX

“后 React 时代”的前端框架大都基于组件开发，因此框架常常提供自己的 DSL（领域特定语言），比如 React 的 JSX 语法。

而 Vue 则支持一种 SFC（单文件组件）的模板语法，也是目前唯一一个同时支持 SFC + JSX 的框架。之所以如此，可能因为 Vue 既不是纯运行时框架，也不是纯编译时框架，而是 运行时编译。

SFC 的优势在于天然符合前端开发者的人体工程学，因为 SFC 和传统 HTML 大同小异：

可以看到，SFC 基本就是在 HTML 模板上增加了指令等框架专属功能，并将 JS + HTML + CSS 等底层技术栈高内聚到 SFC 中，再通过模板预编译机制，避免运行时的编译开销。

SFC 模板的缺陷主要在于，某些极端情况下，SFC 无法支持 JSX 的完全编程能力，但 Vue 通过手动渲染函数来解决这个问题。

可以看到，在 Vue 中，JSX 可以视为手动渲染函数的语法糖。

大部分情况下，建议 Vue 用户优先使用 SFC，一来符合前端技术栈的心智模型，二来 Vue 编译器针对 SFC 进行了优化。

总而言之，作为目前唯一一个同时支持 SFC + JSX 的框架，你可以在 Vue 里玩转 JSX，但不一定能在 React 里玩转 SFC。

05. 我是如何爱上 Vue 的？

由于尤大可能不懂 Vue，所以我还想补充一些相关背景，帮助粉丝对 Vue 加大投资，仅供参考。

几年前，当 Vue 的 GitHub star 赶超 React 时，Vue 首次成为地表人气最高的前端框架。

除了人气世界第一，Vue 还有其他世界唯一的奇迹 —— Vue 是唯一一个不同主版本（Vue 2/Vue 3）同时进入人气排行榜前十的前端框架。

另外，很多人对 VCA（Vue 组合式 API） 的原创性褒贬不一。

其实，如果你同时掌握 React Hooks 和 VCA，就会明白，VCA 能做的事情，Hooks 不一定能做。

最骚的是，VCA 如今反过来影响了 React。

可以看到，React 也能无缝衔接到 VCA。

也许有一天，React 也会走上 Preact 那般的响应式路线，和 Vue 殊途同归。

高潮总结

Vue 早期是独立开发者的个人开源项目，一度被视为“玩具框架”，和历史上风评被害的“JS 玩具语言论”如出一辙。

JS 用了 20 年成为地球上人气最高的语言，Vue 则用了 10 年成为前端中人气最高的框架。也许，伟大确实无法被计划。

本次大会中，尤大还现场献唱了一曲《王位》，手把手教学 v-rap 指令。

大数据告诉我们，Vue 如今已经是一个举足轻重的前端框架。

哪怕你不想在生产环境中使用 Vue，作为一个现象级的开源项目，Vue 的设计哲学也值得你投入时间成本学习。开源可以是目的，也可以是手段。

你知道吗？前端不死，只是概率分布并不均匀。如果“前端已死”，愿你向死而生。

最后，我想给 Vue 点赞：“10 周年生日快乐，感谢陪伴！”

参考文献

1. Vue：vuejs.org
2. Redux：redux.js.org
3. Knockout：knockoutjs.com

粉丝互动

本期话题是：Vue 十年磨一剑，你对 Vue 有何看法或期待？你可以在本文下方自由言论，或者转发分享。

欢迎持续关注我，给前端以福利，给编程以复利。谢谢大家的点赞和分享，我们下期再见~