前言

尤大大在2020年4月21日晚九点半线上直播介绍了Vue.js3.0Beta，在2020年9月18日晚11点半发布了Vue.js3.0第一个版本。新版本的出现是为了解决旧版本的问题，当然不可避免的也会带来新的问题。正如霍春阳前辈在《Vue.js设计与实现》一书中说的，框架设计里到处都体现了权衡的艺术。鉴于本人已经具备多年使用Vue2.x实战开发的经验，现在要以“渐进式”的方式去学习Vue3.x的相关知识，去了解Vue3.x给我们带来的便利和新的烦恼。截止目前，Vue3.x的版本已更新到3.3.4。

一、Vue3的6大亮点

• Performance：性能更比Vue 2.0强。
• Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。
• Composition API：组合API。
• Fragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念”。
• Better TypeScript support：更优秀的 Ts 支持。
• Custom Renderer API：暴露了自定义渲染API。

二、深入亮点

1.Performance

• 重写了虚拟Dom的实现（且保证了兼容性，脱离模版的渲染需求旺盛）。
• 编译模板的优化。
• 更高效的组件初始化。
• update性能提高 1.3~2 倍。
• SSR速度提高了 2~3 倍。

2.Tree shaking support（按需引入）

• 可以将无用模块“剪辑”，仅打包需要的（比如v-model,<transition>，用不到就不会打包）。
• 一个简单“HelloWorld”大小仅为：13.5kb
  • 11.75kb，仅Composition API。
• 包含运行时完整功能：22.5kb
  • 拥有更多的功能，却比Vue 2更迷你。

3.Composition API

• 可与现有的 Options API一起使用
• 灵活的逻辑组合与复用
• vue 3的响应式模块可以和其他框架搭配使用

4.Fragment, Teleport, Suspense

1. Fragment

   • 不再限于模板中的单个根节点
   • render 函数也可以返回数组了，类似实现了 React.Fragments 的功能 。
   • 'Just works'

2. Teleport

   • 以前称为<Portal>，译作传送门。

3. Suspense

   • 可在嵌套层级中等待嵌套的异步依赖项
   • 支持async setup()
   • 支持异步组件

5.Better TypeScript support

• Vue 3是用TypeScript编写的库，可以享受到自动的类型定义提示
• JavaScript和TypeScript中的 API 是相同的。
• • 事实上，代码也基本相同
• 支持TSX
• class组件还会继续支持，但是需要引入vue-class-component@next，该模块目前还处在 alpha 阶段。

6.Custom Renderer API

• 正在进行NativeScript Vue集成
• 用户可以尝试WebGL自定义渲染器，与普通 Vue 应用程序一起使用（Vugel）。

三、遗留问题

1. Docs & Migration Tools / Guides
   • 文档更新。
2. Router、Vuex
   • 生态系统更新。
3. CLI
   • 脚手架更新。
4. DevTools
   • 浏览器插件更新。
   • IDE插件更新。
5. IE11 Compatibility build
   • 浏览器兼容。

四、总结

Vue3.x的优势：性能更好、体积更小、更好的逻辑复用、更好的TS支持、提供更先进的组件。

附录

1. 文章：抄笔记：尤雨溪在Vue3.0 Beta直播里聊到了这些…