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

说在前面

前端的技术一直更新特别快，特别是框架这块。4月21晚，Vue作者尤雨溪在B站直播分享了Vue.js 3.0 Beta最新进展。赶紧拿出小本本做笔记，一起来看看尤大大说了些什么。

Performance

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

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

看图说话（以下是性能对比）:

需要重点说明的是：

1. 编译模板的优化

见上图：如果我想编译左侧代码，将会被编译成右侧所示

注意看第二个_createVNode结尾的“1”：

Vue在运行时会生成number（大于0）值的PatchFlag，用作标记。

仅带有PatchFlag标记的节点会被真正追踪，且无论层级嵌套多深，它的动态节点都直接与Block根节点绑定，无需再去遍历静态节点

2. 事件监听缓存：`cacheHandlers`

假如我们要绑定一个事件，如上图左侧所示

关闭 cacheHandlers 时：

onClick会被视为PROPS动态绑定，后续替换点击事件时需要进行更新。

import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("span", { onClick: _ctx.onClick }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["onClick"])
  ]))
}

开启 cacheHandlers 时：

import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("span", {
      onClick: _cache[1] || (_cache[1] = $event => (_ctx.onClick($event)))
    }, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  ]))
}

cache[1]，会自动生成并缓存一个内联函数，“神奇”的变为一个静态节点。（相当于React中useCallback自动化）

2.Tree shaking support

最近React的Hooks火的一塌糊涂，不要担心，Vue也出了

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

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

3.vue 3的响应式模块可以和其他框架搭配使用

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

3. Fragments

Fragments就是碎片

1. 不再限于模板中的单个根节点

2. render 函数也可以返回数组了，类似实现了 React.Fragments 的功能。

3. 'Just works'

4. 更好的Typescript支持

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

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

3. 支持TSX

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

还有Vue 3 + TypeScript 插件正在开发，有类型检查，自动补全等功能，未来可期。

5. Custom Renderer API

1. 正在进行NativeScript Vue集成

2. 用户可以尝试WebGL自定义渲染器，与普通Vue应用程序一起使用（Vugel）

意味着以后可以通过 vue， Dom 编程的方式来进行 webgl 编程，是不是很Nice~

6. 剩余工作