Vuejs发展简史

题记

“谁掌握了过去，谁就掌握了未来”——乔治.奥威尔

前言

发端于2013年的个人项目，已然成为全世界三大前端框架之一，在中国大陆更是前端首选。

它的设计思想、编码技巧也被众多的框架借鉴、模仿。

学习研究Vue的演进，对于前端同学来说，是提高自身认识和水平的法门。

 

纪略

Ø 2013年，在Google工作的尤雨溪，受到Angular的启发，从中提取自己所喜欢的部分，开发出了一款轻量框架，最初命名为Seed。

Ø 同年12月，这粒种子发芽了，更名为Vue，版本号是0.6.0。

Ø 2014.01.24，Vue正式对外发布，版本号是0.8.0。

Ø 发布于2014.02.25的0.9.0，有了自己的代号：Animatrix，这个名字来自动画版的《骇客帝国》，此后，重要的版本都会有自己的代号。

Ø 0.12.0发布于2015.06.13，代号Dragon Ball（龙珠），这一年，Vue迎来了大爆发，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue（我也是在这个论坛上认识Vue的），Vue在JS社区也打响了知名度。

Ø 1.0.0 Evangelion（新世纪福音战士）是Vue历史上的第一个里程碑。同年，vue-router（2015-08-18）、vuex（2015-11-28）、vue-cli（2015-12-27）相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。很多前端同学也是从这个版本开始成为Vue的用户。

Ø 2.0.0 Ghost in the Shell（攻壳机动队）是第二个重要的里程碑，它吸收了React的Virtual Dom方案，还支持服务端渲染。

Ø 就在不久前，Vue发布了2.6.0 Macross（超时空要塞），这是一个承前启后的版本，因为在它之后，3.0.0也呼之欲出了。

1.0

Vue最初的目标是成为大型项目的一个良好补充。设计思想是一种“渐进式框架”，淡化框架本身的主张，降低框架作为工具的复杂度，从而降低对使用者的要求。

相较于之前的版本，1.0的主要改进点是：

1. 提供指令的缩写

针对v-bind和v-on提供缩写形式：

2. 清理精简所提供的接口

此时Vue的目标还是希望作为轻量级框架，成为大型项目的补充（这些大型项目也许已经有自己的前端框架了，如Angular）。

首先清理的当然是那些基本不用的API。

3. 提高初始化的渲染效率

将v-repeat指令换成了v-for指令。同时优化了这个指令的渲染，效率提升了一倍。

4. 两个官方工具的增强：vue-loader和vueify

除了这些，我们还知道，Vue中数据绑定采用的是数据劫持的方式，使用Object的defineProperty方法。和当时主流的Angular使用的事件触发的脏检查是不同的。

这类做法将开发者与直接的DOM操作隔离开来，使得开发者能够更专注于业务逻辑，同时也改变了开发者的思维方式。

2.0

2016年10月1日发布的2.0版本对Vue做了大幅度的重构，性能有了很大的提高，也为日后的跨端发展打下了基础。

1. Virtual DOM

在1.0的时候，Vue和Angular一样，都是把template扔给浏览器解析渲染，然后遍历DOM树，提取节点，绑定数据。

用过1.0版本的同学可能还有印象，如果你使用了Moustache语法来展示内容，会在页面上看到一闪而过的”{{…}}”

2.0借鉴了React的做法，先将template编译为render函数，render函数返回Virtual DOM对象，然后再交由patch函数，调用浏览器接口，渲染出DOM。

Virtual DOM并不能保证渲染效率一定高于直接调用原生DOM接口（例如innerHTML），还需要配合diff，尽量缩小刷新的范围。

除了渲染效率，这种做法还为Vue能够扩展到多端打下了基础。Virtual DOM实际上可视为一种通用的数据格式，如果小学生能看懂VDOM的话，你可以让他们在操场上用团体操摆出个网页来。

2. Render函数

前面已经提到了Render函数的作用，这里不再赘述。不过我觉得Render函数最大的意义在于：

a) 通过Vue提供的构建工具，将template的编译从运行时放到了编译时，提高了运行时的效率

b) 可以只使用Vue的runtime版本，减小文件体积。

3. 服务端渲染

服务端渲染的目的主要有两点：

a) 更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

b) 更快的首屏渲染速度。特别是对于网路速度慢或者运行缓慢的设备，无需等待所有的js都下载和解析完成才渲染页面，而是在服务端渲染好直接发送给客户端渲染页面。

2.6

在2.6发布之前的很长一段时间，Vue核心团队都在忙着vue-cli3.0的开发，积攒了不少需求，一直到2019.02.04，发布了2.6版本。

这个版本主要的改动涉及：语法更新，性能提升，以及向计划中的3.0靠拢。

1. slot语法更新

提供了一个新的指令：v-slot，用来代替slot组件，以统一slot和scoped slot。

2. 异步错误处理

和2.5相比，errorCaptured 钩子和全局的 errorHandler 配置项现在也会处理 v-on 侦听函数中抛出的错误了。另外，如果组件的生命周期钩子或事件handler中有异步操作，那么可以通过返回一个 Promise 的方式来让 Vue 处理可能存在的异步错误。

3. 动态指令参数

参看官网的例子，现在指令的参数可以是动态值，如果参数值为 null，则绑定和监听器会被移除。

4. 编译器警告位置信息

2.6 版本开始，大多数模板编译警告消息现在都带有源码位置信息：

5. 显式创建独立的响应式对象

2.6 引入了一个新的全局 API，可以用来显式地创建响应式对象。生成的对象可以直接用在计算属性和 render 函数中，在被改动时触发相应的更新。

6. 新 ES 模块构建，可直接导入使用

7. 让 nextTick 恢复使用 Microtask

在 2.5 版本中，开发团队做出了一个内部调整：如果更新是在 v-on 事件处理程序中触发的，则会导致 nextTick 使用 Macrotask（而不是 Microtask）来让更新进入队列。最初这么做是为了修复一些浏览器的边界情况，但反过来又导致了很多其他问题。在 2.6 版本中，开发团队为原始问题找到了一个更简单的修复方案，这样我们就可以在任何情况下恢复 nextTick 使用 Microtask。

8. this.$scopedSlots 函数统一返回数组

在 render 函数中，scoped slot 通过 this.$scopedSlots 暴露为函数。在之前版本，调用 scoped slot 函数会根据父组件传入内容返回单个 VNode 或 VNode 数组。这种设计实际上是一种疏忽，因为它返回值的类型不确定，可能会导致意外的边界情况。

在 2.6 版本，scoped slot 函数确保只返回 VNode 数组或 undefined。

3.0

3.0是非常大的重构，源码使用TypeScript重写，并且还有许多令人期待的新特性：

1. Virtual DOM完全重构

编译器承担了更多的责任，将之前一些在runtime时做的工作挪了过来：

a) 组件快速路径+单一类型+子类型检测：

b) 优化slot的编译，避免无谓的父／子节点重渲染

普通的 slot 是在父组件的渲染函数中生成的，因此当一个普通的 slot 所依赖的数据发生变化时，首先触发的是父组件的更新，然后新的 slot 内容被传到子组件，触发子组件更新。

相比之下，scoped slot 在编译时生成的是一个函数，这个函数被传入子组件之后会在子组件的渲染函数中被调用。这意味着 scoped slot 的依赖会被子组件收集，那么当依赖变动时就只会直接触发子组件更新。

c) 静态内容和静态属性提取

当编译器发现这些静态属性的时候，就会直接提取这部分的静态属性作为实例属性的一部分，在后面的数据比较中直接忽略这部分静态属性，以提升性能。

d) 内联事件函数的提取

2. 使用Proxy代替defineProperty

defineProperty监听不到对象属性的增删、数组元素和长度的变化，同时会在vue初始化的时候把所有的Observer都建立好，才能观察到数据对象属性的变化。

而proxy可以做到监听对象属性的增删和数组元素和长度的修改，还可以监听Map、Set、WeakSet、WeakMap，同时还实现了惰性的监听，不会在初始化的时候创建所有的Observer，而是会在用到的时候才去监听。

3. 使用TypeScript重构

因为Flow烂尾了，而TypeScript又越来越好。

4. 自定义的Renderer API

这一点是为了向多端扩展，我们知道，现在Weex适配Vue采取的是fork的方式。3.0之后，这些native的适配层就可以通过自定义渲染器的方式来扩展了。

5. 支持Time Slicing

目前时间切片还处于实验阶段。

Vue运行在浏览器的主线程，如果运行了一个非常耗费时间的操作，那么浏览器会停止对用户操作的响应，直到计算完毕。显然这种用户体验是非常糟糕的，用户还以为浏览器已经挂掉了。在有了Time Slicing支持后，Vue将会限制自己的执行时间，只在一个时间片段内运行，这个时间片段被称为“帧”，默认情况下一帧的时间是16ms，对于小型计算任务来说基本足够了，而一秒钟可以运行62.5帧，有60帧左右的刷新率，浏览器对用户的响应将会是比较顺滑的了。