Vue3究竟做了些什么，你还不了解下？

大佬带娃图镇.jpg 不知道会不会被打QAQ。

航海王的开始

• 关于第一个 Vue3 的想法（2018年2月）
• 第一个 工作模型  (2018年9月)
• 第一个 vue-next  private 的工作仓库(2018年9月，在原型的一周后)
• 随后不久就宣布了Vue3.0的计划开始( 撒花花，2018年9月21日 )
• 尝试阶段：早期的 Class ， TypeScript ， Hooks ， 时间切片 （2018年9月开始进行，到2019年第一季度） 
• RFC 的建立，也就是海贼王的船刚造出来，准备下海了（2019年1月）
• Class API RFC 的提出（2019年2月）
• 遇到了瓶颈，找寻新的突破，看上去在行走，但始终没有前进（2019年3月 ~ 5月）
• Class API  卒 （2019年5月）
• 重写核心渲染逻辑，算是重来一次，回个档 （2019年5月 ~ 6月）
• Function API  RFC 提出（2019年6月）
• Composition API 的设计和反馈 （2019年6月 ~ 8月）
• Composition API  （2019年8月）
• Vue2  options API 的支持和新编译引擎的实现 （2019年九月）
• vModel 实现（2019年10月）
• 转换过渡系统（2019年11月）
• SFC  HMR Tooling （2019年12月）
• Vue3.0 alpha-1 出来啦，撒花（2020年1月）
• 服务端渲染 SSR ，据说是渲染性能提高了两三倍，不知道如何，到时候试试（2020年1月 ~ 4月）
• Vue3.0 beta-1 出来拉，乖巧静坐图.jpg （2020年4月）
• Vite  和 VitePress  VuetRouter Vuex 尝试进行 Vue3.0 的工作 （2020年4月 ~ 7月）
• Vue3.0 rc-1 最后的进程啦，封面图是在 RC 中吗，（2020年7月17日）
• Vue3.0 发布，代号 One Pice 航海王还是海贼王QAQ （2020年9月20日）

造船消耗

为了这艘航海船，消耗了非常多的东西，可以看到，不仅仅尤大和他的社区团队在努力，小伙伴们也很积极呢，所以还有什么理由学不动呢。

• 2年
• 37RFCS
• 2682次代码提交
• 628次拉去请求
• 人工审核合并了99位贡献者
• 整个社区的倾力支持，最后是属于每一位位 Vue3.0 做过贡献的小伙伴们。

使命

当我看到这句话的时候突然有一丝的愣神，作为 Vueer ，很多时候看别人对待 Vue.js 的初步印象就是 简单 易上手 学习成本低 ，同样的在有些人眼里， Vue.js 变得像是 小白CV 必备， 外包开发 必备的框架。本身开发者也会成长，随着一年两年的工作后，很多 Vue 开发者或许会转换成 React 也或许会继续使用 Vue ，但是最终，这些开发者都会成长，成长成为独当一面的前端工程师，而 Vue 就像是一把兵器，获取你会丢掉它换一把，但最终它依旧是你曾经最合适的一把，重剑无锋，大巧不工，凌厉刚猛，无坚不摧。

致敬那些在前端路上越走越远的人们。

现在的我已经在转型 React 的路途上行走，但是我依旧关注着 Vue 的成长，每一次发版，每一次的突破。感谢 Vue 给与了我入门前端的机会。期待着一起成长。

Vue3.0新特性

• 易维护：基于TypeScript ，更好的数据类型推导。
• 更快： 基于Proxy更直接的数据代理，更好的虚拟DOM和SSR渲染
• 更小：Tree-shaking & 时间切片
• 更好的规划： CompositionAPI
• Better DX：组件改进，新的单文件组件

TypeScript

Vue3 对 TypeScript 的工作非常的棒（对于Vue2.0），内部采用了 TypeScript 进行重构，带来了更好的IDE智能提示，更加安全严谨的代码风格。同样的对外部开发者提供了更好的 TypeScript 的类型服务，如果你的 Team 需要 TypeScript ，那么我想应该会有一些惊喜，至少我现在使用 Typescript 还没有不良的体验。可以参考下官方举例的一些特性：

CompositionAPI

如果在 Vue2 上维护过大于1500行的单一 vue 组件，你必然经历过代码逻辑反复横跳的问题。这么反人类的思维应该没有几个人觉得这是合理的吧。所以一直关注 Vue3.0 的我，看到新 API 来说，我想应该可以把竖屏给换掉了。使用 Composition API 可以将其逻辑进行拆分，在使用。你可以把 setup 当成我们编程中的 main 函数，然后可以在其中有很多个调用函数。官方的建议是用来替换 mixins 的。

实验室特性

• Script Setup

compositionAPI 需要将我们定义的状态进行 return ，这个过程在开发者看来是一个比较繁琐的事情，也算是一个不良好的地方吧，所以就有了我们 script setup 新特性。通过在 script 标签上声明 setup 来模拟 setup 函数。当然，现在还处于一个试验周期的阶段，会不会成为定案还不知道。

<script setup>
  export const loading = ref(false)
  export const message = 'hello vue3.0 script setup'
</script>

• Style Vars

这是另外一个非常惊喜的东西，我们可以在样式模板中写变量啦，神奇有没有QAQ。在这里给这个 feture 点个星星。这个特性我也只是了解了下，没有去深入。所以我也不能去进行一些细讲，感兴趣的可以去看其他大佬的文章哦。

<style vars="{ border, color }" scoped>
h1 {
  color: var(--color);
  border: var(--border);
}
</style>

新的虚拟DOM编译模板

为什么推荐使用 template 模板来写呢，在发布会提到了，Vue的模板引擎进行优化后，会对模板中的静态dom和动态dom进行提前的分析和优化保留必要的渲染行为，减少运行时的工作量，来优化渲染效果和减少渲染时间，尽可能多的避免使用JavaScript，达到更好的模板编译效果。我想后续肯定会有 team 进行 jsx 和 template 的对比分析，我们敬请期待哦。同样的，在 开课吧的web前端会客厅尤雨溪篇 蜗牛老师(大圣) 也进行过 template 的承压测试。感兴趣的可以去看下哦。

最小12KB？

在 Vue3 中，框架的大小是根据你的使用成正比的。所以说，不必要的东西就没必要去引入的。官方也列举了常见情况下的包大小。可以看到，当你使用 CompostionAPI 的情况下，包大小仅仅只有 12KB 。12KB的大小对于我们开发来说，甚至不如一张图片，而加载一个核心的框架库，仅仅只是 12KB 。

• 所有特性导入下：约为23KB
• MINI的情况下：约为14KB
• 只使用CompositionAPI： 12KB 

好菜需静等

虽然已经正式发布了 Vue3.0 ，但官方依旧不建议现在升级使用，虽然在使用上是没有问题的，但你可能会面临着非常头痛的问题，在开发过程中，大部分依赖的框架是不可用的，比如： Element 。至今我知晓的UI框架中支持 Vue3.0 的只有 Ant Design Vue 和 Vant 。当然，虽然是可用的，但是谁能保证没有一些问题呢。因此，好菜须静等，在庞大的 Vue 爱好者下，我想周边的设施会非常快速的建立起来，我们会看到会有许多新的，基于 Vue 开发的开源库诞生。同样的， Vue 的工作也没有停止脚步，依旧在进行新的工作。

• 进行IE11老大哥的浏览器支持
• 新版本devtools中的Router和Vuex的兼容支持工作
• Vite脚手架的迭代
• Vue2.7终结版，最后的花火。
• 未完待续，

总结

看完了 Vue3 的发布会，感慨下尤大的发际线坚挺。想了下自己，摸了摸额前，长出一口气，还好有头发。可以想象，Vue3非一朝一夕就像出来的，也是不停的在试错，重做的路上走了一回，也碰到非常多的瓶颈。两年时间，从2-3这其中的故事，哪里是三言两语就能讲的清楚的呢。

总结下，Vue 的高级特性让前端项目变得更加的灵活。其次就是编程思想和 React Hooks 算是相通的，基本上算是思维统一了。只是换了个形式写 Hook 。同样的解决了 Vue2 逻辑反复横跳的问题，更好好 TS 支持，更好的性能，更完善的数据响应式等等。都解决很多原有的痛点，非常期待的版本。或许，在这个春节之后，我们就可以正式的进行 Vue3.0 的项目开发拉。我们一起期待正式用上 Vue3 的那天吧。

@wangly19 ：看点个赞在走呗。

链接

• Vue3官网：查阅
• Vue3全球发布会：观看
• 前端会客厅尤雨溪篇：观看