VueConf 2022 - Vue 的进化历程

库阶段(Library) 2013-2015

库与框架: 库更像是一个小模块嵌入于在大项目中, 而框架则定义了一套自己的工程实践与配套工具

库阶段实现了基于 ES5 getter/setter 的响应式系统, MVVM, 模板数据绑定. 并没有对构建工具等做出限制

此时 Vue 的组件与响应式系统强耦合, 没有编译过程, 直接将模板实例为 DOM 并遍历实现数据绑定

框架阶段(Framework Phase) 2015-2016

实现 Vue 1.0

• 引入了 Vue Router(SPA), vue-cli, Vuex(状态管理) 此时 Vue 更像是一个框架了
• 引入了 v-bind, v-on, v-for 及其缩写
• 实现了热更新与 Scoped CSS

通用框架阶段(Universal Framework Phase) 2016-2019

完全重写, 实现 Vue 2.0.

• 引入了模板编译 Virtual DOM
• 引入了基于 Virtual DOM 的服务端渲染
• 引入了基于 Virtual DOM 的跨端渲染
• 手动实现了 TS 定义
• 扩展了 vue-cli, 完成了工具链与 vue 的解绑
• 2.1 引入了作用域插槽
• 2.2 引入了基于路由的代码分割(SSR)
• 2.3 引入了基于路由的资源预加载(SSR, 基于 webpack 生成的 manifest 文件分析资源引用关系)
• 2.4 引入了异步组件支持与编译输出(SSR)

编译/运行时混合阶(Compiler/Runtime Hybrid Phase) 2019-now

Vue 2 的编译与运行模块是完全解耦的, 两者互不通信息, 这导致编译器与运行时无法协作优化.

Vue 3

• 实现了基于编译优化的 Virtual DOM 性能策略(Block Tree, PatchFlags)
• 提出了 Composition API(当时也提出了基于 class 的 API, 但是因为 class 的装饰器语法不稳定, 最后选择了 Composition API). 切换 Composition API 后
  • 可扩展性得到了显著提升, 逻辑易于重组, 抽取, 复用
  • TS 更加友好
• 实现了完全优化的 SSR 编译输出
• 开发了 Vite, 将 vue-cli 功能部分剥离到 Vite.
• 实现了同一份模版,不同的编译输出
  • 浏览器: 高度优化的 Virtual DOM 渲染函数
  • SSR: buffer + 字符串拼接
  • 将来: Vapor mode (无 Virtual DOM 的渲染代码)
• 单文件组件语法糖
  • <script setup>
  • CSS v-bind()
  • Reactivity Transform
• 3.1 引入了 Migration Build
• 3.2 引入了 <script setup>

现在的 Vue3

• core: 运行时, 编译器
• 文档
• 工具链 (create-vue)
• SPA 路由 (Vue Router)
• 状态管理 (Pinia)
• 浏览器开发工具 (vue-devtools)
• IDE 支持 (Volar)
• TypeScript 支持 (将 tsc 扩展为 vue-tsc 以支持 sfc 检查)
• 静态分析 (eslint-plugin-vue)
• 单元测试 (@vue/test-utils)

未来

• 短期
  • Reactivity Transform / Suspense 稳定化
  • SSR 水合改进 (lazy / on-demand / server-only)
• 中到长期
  • Vapor mode (受 Solid 启发的模版编译策略)