Vue简史

题记

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

前言

发端于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提供缩写形式：

<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>

<!-- full syntax -->
<button v-bind:disabled="someDynamicCondition">Button</button>
<!-- shorthand -->
<button :disabled="someDynamicCondition">Button</button>复制代码

<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>复制代码

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，则绑定和监听器会被移除。

<!-- full syntax -->
<a v-bind:href="url"> ... </a>

<!-- shorthand -->
<a :href="url"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>复制代码

<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>

<!-- shorthand -->
<a @click="doSomething"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>复制代码

4. 编译器警告位置信息

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

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

2.6 引入了一个新的全局 API，可以用来显式地创建响应式对象

constreactiveState =Vue.observable({  count:0})复制代码

生成的对象可以直接用在计算属性和 render 函数中，在被改动时触发相应的更新。

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

<script type="module">
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
  
new Vue({
  // ...
})
</script>复制代码

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帧左右的刷新率，浏览器对用户的响应将会是比较顺滑的了。

参考资料

维基百科:Vue.js

State of Vue.js report 2017 中文版

vuejs.org/2015/10/26/…

Vue 2.0 is Here!

The Progressive Framework

Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？

Vue作者尤雨溪：Vue 2.0，渐进式前端解决方案

javascript实现数据双向绑定的三种方式

网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？

Vue 服务端渲染技术

ES6入门：Proxy

ES6入门：Reflect

ES6黑科技实践--proxy,reflect

VUE3.0的这些改进你会期待吗

全面改革：解读 Vue 3.0 的变化

实现双向绑定Proxy比defineproperty优劣如何

Time Slicing Demo

如何评价React的新功能Time Slice 和Suspense？

学习React Fiber架构，理解如何实现时间分片（Time Slicing）和 Suspense.

完全理解React Fiber

扩展阅读

	中译名	一句话介绍
Animatrix	骇客帝国动画版	锡安到底是不是真的
Blade Runner	银翼杀手	影史最佳科幻片，催生了赛博朋克这一科幻流派的产生
Cowboy Bebop	星际牛仔	因为东京电视台单方面认为动画存在较大的尺度问题而并没有让这部动画如期播完。
Dragon Ball	龙珠／七龙珠	鸟山明的代表作
Evangelion	新世纪福音战士	日本动画史上的里程碑，被公认为日本历史中最伟大的动画之一
Ghost in the shell	攻壳机动队	故事设定在2029年，快来了
Hunter x Hunter	全职猎人	连载二十年，休刊无数次
Initial D	头文字D	还是周杰伦演的好看
JoJos Bizarre Adventure	JOJO的奇妙冒险	我尽量避免战斗，但是我从不逃避
Kill la Kill	斩服少女
Level E	灵异E接触	开启了富坚义博休刊习惯的罪恶之源
Macross	超时空要塞	做工精良的精品