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

说在前面

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

1. Performance

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

1. 重写了虚拟Dom的实现（且保证了兼容性，脱离模版的渲染需求旺盛）。
2. 编译模板的优化。
3. 更高效的组件初始化。
4. update性能提高1.3~2倍。
5. 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. 剩余工作