我们发现， Vue 越来越受欢迎了。
不管是BAT大厂，还是创业公司，Vue都被广泛的应用。对比Angular 和 React，三者都是非常优秀的前端框架，但从 GitHub 上来看，Vue 已经达到了 170 万的 Star。Vue的相关技术原理也成为了前端岗位面试中的必考知识点，掌握 Vue 对于前端工程师来说更像是一门“必修课”。为此，华为云社区邀请了90后前端开发工程师尹婷带来了《Vue3.0新特性介绍以及搭建一个vue组件库》的分享。
了解Vue3.0先从六大特性说起Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。在2019年10月05日凌晨，Vue3的源代码alpha。目前已经发布正式版，作者表示， Vue 3.0具有六大特性：Tree Shaking；Composition；Fragment；Teleport；Suspense；渲染Performance。渲染Performance主要是框架内部的性能优化，相对比较底层，本文会主要为大家介绍前四个特性的解读。
Tree Shaking大多数编译器都会为我们的代码进行一个死代码的去除工作。首先我们要了解一下，什么是死代码呢？
以下几个特性的代码，我们把它称之为死代码：代码不会被执行，不可到达；代码执行的结果不会被用到；代码只会影响死变量（只写不读）。比如我们给一个变量赋值，但是并没有去用这个变量，那么这就是一个死变量。这就是在我们定义阶段会把它去除的一部分，比如说roll up消除死代码的工作。
如上图示例，左边是开发的源码提供的两个函数，但最终只用到了baz函数。在最后打包的时候，会把foo函数去除掉，只把baz这个函数打包进浏览器里面运行。Tree Shaking是消除死代码的一种方式，更关注于无用模块的消除，消除那些引用了但并没有被使用的模块。
左边这块代码，export有两个函数，一个是post，一个是get，但是在我们生产里边真正使用到只有post。那么rollup在打包之后，就会直接消除掉get的函数，然后只把post的函数打包进入我们的生产里。除了rollup支持这个特性外，webpack也支持。
接下来，我们看一下VUE3.0对Tree Shaking的支持都做了哪些事情？
首先以VUE2和VUE3对nextTick的使用进行对比：VUE2把nextTick挂载到VUE实例上的一个global API式；VUE3先把nextTick模块剔除，在要使用的时候，再把这个模块引入。
通过这个对比，我们可以看到使用VUE2的时候，即使没有nextTick或者其他方法，但由于它是一个GLOBA API，它一定会被挂载到一个实例上，最后打包生产代码的时候，会把这个函数给打包进去，这一段代码进而也会影响到文件体积。在VUE3.0如果不需要这个模块的话，最后打包的这个文件里边就不会有这一块代码。通过这种方式就减少了最后生产代码的体积。
当然，不只是nextTick，在VUE3.0内部也做了其他很多tree-shaking。例如：如果不使用keep-alive组件或v-show指令，它会少引入很多跟keep-alive或者v-show不相关的包。
上图为Vue2.0的这段代码，左边是引入utils函数，然后把这个函数指为mixins。这一段代码是在Vue2里边是最常用到的，但这段代码是有问题的。
如果对这个项目不熟悉，第一次看到这个代码的时候，由于不知道这个utils里边有哪些属性和方法，也就是说这个mixins对于开发者就是个黑盒。很容易遇到一种场景：在开发组件初期，应用了mixins的一个方法，现在不需要使用该方法了，在删除的过程发现不知道其他的地方是否引用过mixins其他的属性和方法。
