Vue 3.0都带来了哪些变化

请相信，这个世界上来真的有人在过着你想过的生活，愿你我既可以朝九晚五，又能够浪迹天涯

微信图片_20200508000823.jpg

迟到了，迟到了，距离4月21号尤雨溪在哔哩哔哩直播分享vue3.0 beta更新已经近一个月的时间，下面我们来一起看看尤大大究竟嘚吧了些啥。

全新的文档

image.png

vue3.0 beta发布之后的所有进度及文档都将在全新的RFS文档中可以看到https://github.com/vuejs/rfcs/

六大亮点

image.png

performance：性能比vue2.0更强
tree-shaking support：可以仅打包真正需要的模块
Composition API：组合API，这将是一大两点，可参考https://www.jianshu.com/p/687a393e788a
Fragment, Teleport, Suspense：碎片，protal传送门，悬念
Better TypeScript support：更优秀的Ts支持，这一点也是我比较期待的，在这个前端必须掌握TS的时代，这是大势所趋
Custom Renderer API：暴露了自定义渲染API

性能

image.png

重写了虚拟DOM的实现
编译模板的优化
更高效的组件初始化
update性能提升1.3~2倍
SSR（https://www.jianshu.com/p/b6f288048a72
）速度提高了2~3倍
各项性能对比图

image.png

编译模板的优化

image.png

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

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

image.png

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

image.png

<div>
  <span>static</span>
  <span :id="hello" class="bar">{{ msg }}   </span>
</div>

在vue的编译中会成为：

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

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

PatchFlag 变成了9 /* TEXT, PROPS */, ["id"]
它会告知我们不光有TEXT变化，还有PROPS变化（id）
这样既跳出了virtual dom性能的瓶颈，又保留了可以手写render的灵活性。
等于是：既有react的灵活性，又有基于模板的性能保证。

时间监听缓存： cacheHandlers

image.png

<div>
  <span @click="onClick">
    {{msg}}
  </span>
</div>

关闭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: _ctx.onClick }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["onClick"])
  ]))
}

onClick会被视为PROPS动态绑定，后续替换点击事件时需要进行更新。
开启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]，会自动生成并缓存一个内联函数，“神奇”的变为一个静态节点。 Ps：相当于React中useCallback自动化。

PatchFlags枚举定义

而通过查询Ts枚举定义，我们可以看到分别定义了以下的追踪标记：

export const enum PatchFlags {
  
  TEXT = 1,// 表示具有动态textContent的元素
  CLASS = 1 << 1,  // 表示有动态Class的元素
  STYLE = 1 << 2,  // 表示动态样式（静态如style="color: red"，也会提升至动态）
  PROPS = 1 << 3,  // 表示具有非类/样式动态道具的元素。
  FULL_PROPS = 1 << 4,  // 表示带有动态键的道具的元素，与上面三种相斥
  HYDRATE_EVENTS = 1 << 5,  // 表示带有事件监听器的元素
  STABLE_FRAGMENT = 1 << 6,   // 表示其子顺序不变的片段（没懂）。 
  KEYED_FRAGMENT = 1 << 7, // 表示带有键控或部分键控子元素的片段。
  UNKEYED_FRAGMENT = 1 << 8, // 表示带有无key绑定的片段
  NEED_PATCH = 1 << 9,   // 表示只需要非属性补丁的元素，例如ref或hooks
  DYNAMIC_SLOTS = 1 << 10,  // 表示具有动态插槽的元素
  // 特殊 FLAGS -------------------------------------------------------------
  HOISTED = -1,  // 特殊标志是负整数表示永远不会用作diff,只需检查 patchFlag === FLAG.
  BAIL = -2 // 一个特殊的标志，指代差异算法（没懂）
}

Tree shaking support

image.png

可以将无用的模块干掉（比如v-model,<transition>，用不到就不会打包）
一个简单的一个简单“HelloWorld”大小仅为：13.5kb
-- 11.75kb，仅Composition API。
包含运行时完整功能：22.5kb
-- 拥有更多的功能，却比Vue 2更迷你。
很多时候，我们并不需要 vue提供的所有功能，在 vue 2 并没有方式排除掉，但是 3.0 都可能做成了按需引入。

Composition API

image.png

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

混入(mixin) 将不再作为推荐使用， Composition API可以实现更灵活且无副作用的复用代码
官网https://composition-api.vuejs.org/#summary

fragment

image.png

fragment翻译为： “碎片”

不再限于模板中的单个根节点（之前的vue文件是必须有一个根节点）
render函数也可以返回数组，类似实现了React.Fragments 的功能
just works，一句话，就干正事

teleport

image.png

以前称为<Portal>https://www.dazhuanlan.com/2019/10/05/5d98173a7627a/?cf_chl_jschl_tk=b1df84b1bda015c7e06f22dd75c601c3c788273f-1589730369-0-AcsiZGPFJijG6qg2folCqdjBQaFTHgpEFf6G-NyddhLFugzBPc-2G3MHOEuzwNRDuyFth6-60dEXJnVk_FsFPsNbxTn8ClkrvLLwGPJxPIvqq25A_YARa782HjsmRsXy3Fyuyyh9d1AwTCi4bgWekEnNnClx__VfV3eE3GuFCorI1o-ALzWU4lLrerftTTeU3sV0G7mwPLBXWIgYCSijJliJtAZfG7SYp9SjqoV13NoFTcJ7aQ0MWL0G35F4tbXwWmw7DhP686ZzVNi3pVk3UiDjc_g5viJ0xF-5UvfOtzYNcZbILk9zmPCYEW7L-YIyAA
，译作传送门。
<Teleport>原先是对标 React Portal（增加多个新功能，更强）

但因为Chrome有个提案，会增加一个名为Portal的原生element，为避免命名冲突，改为Teleport

<Suspense>

image.png

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

更好的typeScript支持

image.png

vue3.0是用typescript编写的库，可以享受自动的类型定义提示
JavaScript和typescript中的API相同
-- 事实上，代码也是几乎相同的
支持TSX
仍然支持class组件(https://www.jianshu.com/p/b8f031875829
)，但是需要引用vue-class-component@next，该模块仍在alpha阶段
还有Vue 3 + TypeScript 插件正在开发，有类型检查，自动补全等功能。目前进展可喜。(这是我对vue3最大的期待)