【VueConf 2022】Vue的进化历程

,12 月 10 日，第五届 Vue.js 开发者大会（VueConf 2022）由 Vue.js 官方通过在线直播的方式举办。Vue.js 作者尤雨溪发表了题为 《Vue 的进化历程》 的演讲，下面就来看看这场演讲的具体内容吧！,,2013-2015年，可以看做是 Vue 的库阶段。那库和框架的区别到底是什么？库更多的是嵌入到已有的体系，只是拿开简单使用。而框架会定义更加广泛的一套工程实践，遵循一定的最佳实践，用配套的工具去遵循一套完整的规范。所以当时的 Vue 只是一个库。,,库阶段的重要里程碑：,2013.12：发布第一个以“Vue.js”命名的版本（0.6.0），在此之前的版本都叫 Seed；,2014.02：第一次在 HackerNews 上公开发，公开后的第一周获得了 400+ Github Star；,2014.10：第一次实现 Vue SFC 单文件组件（vueify），使用 Browserify 打包；,2014.11：第一次完全重写（0.11），考虑如何让它更适合用在生产环境中。,库阶段的设计重点：,库阶段的特征：,响应式系统和组件实例有很强的耦合，所有响应式的内容都需要通过在this上做操作来实现，这样的实现比较直观，容易理解，符合基于class思考的思维模式，但是会影响逻辑复用；,直到 0.11 版本才引入 Mixins（混入）；,2015-2016 年，Vue 就进入了框架阶段，以 1.X 版本为目标。,,框架阶段的重要里程碑：,框架阶段的设计重点：,确定了 v-bind、v-on 和对应简写的语法；,第一次引入了 v-for（取代了 v-repeat）；,2016-2019年，Vue 进入了通用框架阶段。,,通用框架阶段的重要里程碑：,Vue 2.0 阶段的设计重点：,在源码中使用 Flow 定义类型；,直到现在，2.x 版本的 TypeScript 类型定义都需要手动维护，而不是从源代码中生成的，这也是在 Vue 3 中使用 TypeScript 进行重写的原因之一。,这个阶段的一个重要 demo 就是：vue-hackernews-2.0[1]，在当时这个 demo 有重要的意义：,2019年至今，Vue 进入了编译/运行时混合阶段。虽然 2.0 阶段引入了编译，但是 2.0 的编译和运行时的结合是非常浅的结合，编译器编译出 Virtual DOM 渲染函数就到此为止了，编译器对运行时是怎么样的并没有太多概念，而运行时对于编译器也是没有概念的，这样很多优化空间就被浪费了。所以 3.0 阶段的主要目标就是让编译器和运行时都属于框架的一部分，它们本身就是耦合的。 在耦合的前提下，让编译器为运行时提供更多的信息，让运行时知道编译器提供的信息。,,编译/运行时混合阶段的重要里程碑：,Vue 3.0 重构初期的重心如下：,Composition API 的意义：,Vite 的意义：,Vue 3 目前定义的框架范畴：,整体趋势就是向编译/运行时混合模式进化：,在浏览器中：输出高度优化的 Virtual DOM 渲染函数；,在 SSR 中：输出 buffer + 字符串拼接；,将来：Vapar mode（不依赖 Virtual DOM 的渲染代码，获得更好的性能）,Vue 团队接下来的工作会以 API 的稳定性为优先，重点会放在不影响使用方式的改进上。不计划引入像 React Server Components 这样需要和服务器强绑定的特性。,稳定 Reactivity Transform / Suspense，从实验特性变为稳定特性；,Vue 3.3 的重点是 SSR 的水合性能改进，提供以异步组件为边界的懒水合和按需水合。,关于 Vapor mode：,完全一样的模板/组件语法可以编译成完全不一样的输出，这个输出不再依赖 Virtual DOM 运行时，而是针对 Web 性能进行特化，可以提供极致的性能和内存占用，还可以在一些情况下做零成本组件抽象，即当组件只使用了基本的 API 时，将它编译成一个不需要组件实例的状态，这样就可以节省一定的组件实例开销。,Vapor mode 的使用方式上，可以将它无缝嵌入到现有的应用中，可以兼容基于 Virtual DOM 的第三方库。如果是全新的项目，可以启用 Vapor-only，这样就再兼容 Virtual DOM，丢掉了相关的运行时，适合对性能有极致要求的场景。,[1] vue-hackernews-2.0: https://github.com/vuejs/vue-hackernews-2.0