vue3.0的优化

一、写在前面
Vue.js 从 1.x 到 2.0 版本，最大的升级就是引入了虚拟 DOM 的概念，它为后续做服务端渲染以及跨端框架 Weex 提供了基础。Vue.js 2.x 发展了很久，现在周边的生态设施都已经非常完善了，而且对于 Vue.js 用户而言，它几乎满足了我们日常开发的所有需求。你可能觉得 Vue.js 2.x 已经足够优秀，但是在 Vue.js 作者尤小右的眼中它还不够完美。在迭代 2.x 版本的过程中，小右发现了很多需要解决的痛点，比如源码自身的维护性，数据量大后带来的渲染和更新的性能问题，一些想舍弃但为了兼容一直保留的鸡肋 API 等；另外，小右还希望能给开发人员带来更好的编程体验，比如更好的 TypeScript 支持、更好的逻辑复用实践等，所以他希望能从源码、性能和语法 API 三个大的方面优化框架。
那么接下来，我们就一起来看一下 Vue.js 3.0 具体做了哪些优化。相信你学习完这篇文章，不仅能知道 Vue.js 3.0 的升级给我们开发带来的收益，还能学习到一些设计思想和理念，并在自己的开发工作中应用，获得提升。
二、源码优化：
2.1、更好的代码管理方式：monorepo
首先源码的优化体现在代码的管理方式上。vue2.x的源码管托在src目录中，然后依据功能拆分出了complier(模板编译的相关代码)，core(与平台无关的通用运行时代码)，platforms(平台专有代码)，server（服务端渲染的相关代码）、sfc（.vue 单文件解析相关代码）、shared（共享工具代码） 等目录。

而到了vue3.0，整个源码是通过monorepo的方式维护的，根据功能不同的模块拆分到packages目录下面不同的子目录中。

可以看出相对于vue2.x的源码组织方式，monorepo把这些不同的package中，每一个package有各自的api，类型定义和测试，这样使得模块拆分更加细化，职责划分更明确，模块之间的依赖关系也更加明确，开发人员也更容易阅读、理解和更改所有模块源码，提高代码的可维护性。另外一点package可以独立于vue.js去使用，这样例如用户想要使用vue3.0的响应式，可以单独依赖reactive，而不必依赖整个vue.js，减少引用包的体积，而vue2.x却做不到这一点。
2.2、有类型的javascript——typescript
在vue1.x中当时没有采用类型语言。但是对于开发大型框架的时候，使用类型语言非常有利于IDE对于类型推导。所以尤雨溪在vue2.x使用的是Flow来进行开发，Flow是facebook出品的javascript的静态类型检查工具，但是flow对于一些复杂的场景flow支持的不是很好。所以在vue3.x中vue全面转向typescript，typescript提供了更好的类型检查，也支持复杂的类型推导。
三、性能优化
3.1、源码体积优化
在性能优化方面我们首先想到的是代码的体积，因为javascript包的体积越小，意味着网络传输的时间就越短，javascript引擎解析包的速度也就越快。vue3.0在源码体积上做了哪些工作呢？
1、首先，移除了一些冷门的api（例如：filter， inline-template）等
2、其次，引入tree-shaking的技术来减少打包的体积。
第一点非常容易理解，但是第二点该如何去理解呢?下面举一个例子，一个math模块中定义两个方法square(x)和cube(x)。

export function square(x) {
   
   
	return x * x
}
export function cube(x) {
   
   
	return x * x * x
}

然后我们在这个模块外边引入cube方法。

import {
   
    cube } from './math.js'

最终math模块会被webpack打包如下所示。

/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
   
   
  'use strict';
  /* unused harmony export square */
  /* harmony export (immutable) */ __webpack_exports__['a'] = cube;
  function square(x) {
   
   
    return x * x;
  }
  function cube(x) {