【VueConf 2022】尤雨溪：Vue的进化历程

12 月 10 日，第五届 Vue.js 开发者大会（VueConf 2022）由 Vue.js 官方通过在线直播的方式举办。Vue.js 作者尤雨溪发表了题为 《Vue 的进化历程》 的演讲，下面就来看看这场分享的具体内容吧！

库阶段

Vue 一开始（2013-2015）可以看做库阶段。那库和框架的区别到底是什么？库更多的是嵌入到已有的体系，只是拿开简单使用。而框架会定义更加广泛的一套工程实践，遵循一定的最佳实践，用配套的工具去遵循一套完整的规范。所以当时的 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），考虑如何让它更适合用在生产环境中。

库阶段的设计重点：

• 基于 ES5 的 getter/setters 和原生 JavaScript 对象实现响应式系统，当时的设计重点就是满足个人设计和实现上的想法和兴趣；
• 基于响应式系统实现模版数据绑定（MVVM）；
• 设计重点就是能像 JQuery 一样可以直接通过<script>标签直接引用的简单库，这种方式不会对其他方面产生意见和限制。

库阶段的特征：

• Vue 还不算一个框架；
• 当时的 API 受到了 Backbone/Ractive 的影响：* 响应式系统和组件实例有很强的耦合，所有响应式的内容都需要通过在this上做操作来实现，这样的实现比较直观，容易理解，符合基于class思考的思维模式，但是会影响逻辑复用；* 直到 0.11 版本才引入 Mixins（混入）；
• 该阶段还在摸索完善模板语法和作用域规则，每个版本的模板语法都会有比较重大的变动，并且作用域规则不是很明确；
• 基于 DOM 的渲染机制：* 模板和编译后的 JavaScript 之间没有对应性，当时的 Vue 并没有“编译”过程；* 当时的 Vue 的实现通过把模板直接实例化为 DOM 树；* 遍历实例化之后的 DOM 树，在遍历过程中实现数据绑定；* 类似于现在 petite-vue 的实现，它是在 Vue 3 之后，重新将 Vue 1 的实现构成一个更轻量的实现，可以将 petite-vue 认为是 Vue 1的一个新的展现， 把 Vue 1 的实现以更现代的方式去提供出来，其更适用于更轻量化的、不需要很多工程化介入的场景。

框架阶段

2015-2016