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 周年生日快乐，感谢陪伴！”
参考文献
- Vue：vuejs.org
- Redux：redux.js.org
- Knockout：knockoutjs.com
粉丝互动
本期话题是：Vue 十年磨一剑，你对 Vue 有何看法或期待？你可以在本文下方自由言论，或者转发分享。
欢迎持续关注我，给前端以福利，给编程以复利。谢谢大家的点赞和分享，我们下期再见~
