vue3--介绍

Vue3.0来了，一起来看看尤大大说了啥

众所周知，前端的技术一直更新的特别快，特别是框架这块。4月21号晚，Vue作者尤雨溪在B站直播分享了 Vue.js 3.0 Beta 最新进展，想必大家都有去观摩吧？那我们今天一起来回顾下尤大大的分享:

关于Performance

当我们项目功能越来越多、模块规模一步步扩大，这个时候性能考量是非常重要的，那么 Vue.js 3.0 Beta 在性能上给我们带来了哪些惊喜呢？

1. 重写了虚拟Dom实现（且保证了兼容性，脱离模版的渲染需求旺盛）

2. 编译模板的优化

3. 更高效的组件初始化

4. undate性能提高1.3~2倍

5. SSR速度提高了2~3倍
    

文字还不足以触动你？不要急，来看性能对比的图解：

关于Tree shaking support

1. 可以将无用模块“剪辑”，仅打包需要的（比如v-model，<transition>，用不到就不会打包）；

2. 一个简单的 HelloWorld大小仅为：13.5kb

• 11.75kb，仅 Composition API；

• 包含运行时完整功能：22.5kb

• • 拥有更多的功能，然而比Vue 2更迷你；

  很多时候，我们不需要 vue 提供的某些功能，在vue 2 我们没得选，没法排除掉这些没用的功能，但是 Vue 3.0都可能做成了按需引入。

  

  关于Composition API

  最近 Reac t的 Hooks 传的沸沸扬扬，不要急，现在 Vue 也出了，与其相似，只是实现方式不同：

  

  1. 可与现有的Options API一起使用；

  2. 灵活的逻辑组合与复用；

  3. Vue 3.0的响应模块可以和其他框架搭配使用；

  混入（mixin）将不再作为推荐使用，Composition API可以实现更灵活且无副作用的复用代码。

  更好的TypeScript支持

  

  1. Vue 3是用 TypeScript 编写的库（可能很多同学没想到吧），可以享受到自动的类型定义提示；

  2. JavaScript 和 TypeScript 中的API相同（代码也基本相同）；

  3. 支持TSX；

  4. class 组件还会继续支持，但是需要引入 vue-class-component@next，该模块目前还在alpha阶段。

  重点来啦！还有一个喜讯——目前 Vue 3.0 + TypeScript 插件正在开发，有类型检查、自动补全等等，进展迅速。

  剩余未完成的工作还有 Router、Vuex、CLI 等等，预计年终会完成，尤大大实在是未来可期！

  在公司里面看到的一个情况：很多同学 Vue 2都还没玩熟。大家得加把油了啊！等到3.0正式推出时，你才能搭建它，作为前端工作者，你需要的是迎合新的技术，为你的工作产生更多价值。可能有些人明白这个道理，但还是会一头雾水，那把前端技术缕清的最好方式是什么呢？

早一点的文章：

vue3.0的改进思路

vue最主要的特点就是响应式机制、模板、以及对象式的组件声明语法，而3.0对这三部分都做了更改。

 

 

 

1. 响应式

2.x的响应式是基于Object.defineProperty实现的代理，兼容主流浏览器和ie9以上的ie浏览器，能够监听数据对象的变化，但是监听不到对象属性的增删、数组元素和长度的变化，同时会在vue初始化的时候把所有的Observer都建立好，才能观察到数据对象属性的变化。

针对上面的问题，3.0进行了革命性的变更，采用了ES2015的Proxy来代替Object.defineProperty，可以做到监听对象属性的增删和数组元素和长度的修改，还可以监听Map、Set、WeakSet、WeakMap，同时还实现了惰性的监听，不会在初始化的时候创建所有的Observer，而是会在用到的时候才去监听。但是，虽然主流的浏览器都支持Proxy，ie系列却还是不兼容，所以针对ie11，vue3.0决定做单独的适配，暴露出来的api一样，但是底层实现还是Object.defineProperty，这样导致了ie11还是有2.x的问题。但是绝大部分情况下，3.0带来的好处已经能够体验到了。

响应式方面，vue3.0做了实现机制的变更，采用ES2015的Proxy，不但解决了vue2.x中的问题，还是得性能有了进一步提升。虽然有一些兼容问题，但是通过适配的方式解决掉了。此外，还暴露了observable的api来创建响应式对象，可以替代掉event bus，来做一些跨组件的通信。

2.模板

模板方面没有大的变更，只改了作用域插槽，2.x的机制导致作用域插槽变了，父组件会重新渲染，而3.0把作用于插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。

同时，对于render函数的方面，vue3.0也会进行一系列更改来方便习惯直接使用api来生成vdom的开发者。

3. 对象式的组件声明方式

vue2.x中的组件是通过声明的方式传入一系列option，和TypeScript的结合需要通过一些装饰器的方式来做，虽然能实现功能，但是比较麻烦。

3.0修改了组件的声明方式，改成了类式的写法，这样使得和TypeScript的结合变得很容易。

此外，vue的源码也改用了TypeScript来写。其实当代码的功能复杂之后，必须有一个静态类型系统来做一些辅助管理，如React使用的Flow，Angular使用的TypeScript。现在vue3.0也全面改用TypeScript来重写了，更是使得对外暴露的api更容易结合TypeScript。静态类型系统对于复杂代码的维护确实很有必要。

其他的一些东西

vue3.0的改变是全面的，上面只涉及到主要的3个方面，还有一些其他的更改：

• 支持自定义渲染器，从而使得weex可以通过自定义渲染器的方式来扩展，而不是直接fork源码来改的方式。
• 支持Fragment（多个根节点）和Protal（在dom其他部分渲染组建内容）组件，针对一些特殊的场景做了处理。
• 基于treeshaking优化，提供了更多的内置功能。

vue3.0的开发流程规划

vue的开发思路是公开的，尤雨溪说主要的特性会听取一些主要库的开发者的反馈，有比较确定的方案以后公布RFC收集公众的反馈意见，之后才进入开发，同时会同步生态内相关的库和工具的更新。

虽然vue不如react和angular那样有大公司维护，但是借助开源的力量，整个流程都是开源社区参与的，这样vue的稳定程度和开发思路自然也就不会有什么大的问题。

总结

vue3.0对vue的主要3个特点：响应式、模板、对象式的组件声明方式，进行了全面的更改，底层的实现和上层的api都有了明显的变化，基于Proxy重新实现了响应式，基于treeshaking内置了更多功能，提供了类式的组件声明方式。而且源码全部用typescript重写。以及进行了一系列的性能优化。

尤雨溪说，大概19年左右就可以见到vue3.0，非常期待这个全面改革的版本 。