Vue3.0系列(一): VUE3.0的新特性

和Vue2.0 相比，Vue3.0有哪些亮点：

序号	特性	解析
1	Performance	性能上比Vue2.0快1.3-2倍
2	Tree shaking support	按需编译，体积更加轻量化
3	Composition API	组合API，类似 ReactHooks
4	Better TypeScript support	对 Ts 提供了更好的支持
5	Custom Renderer API	暴露了自定义渲染API
6	Fragment,Teleport(Protal),Suspense	更先进的组件

Vue3.0 如何做到更轻量、更快的呢？

1.diff 算法优化

Vue 2中的虚拟Dom是全量比较
Vue 3新增静态标记（PatchFlag）
在与数据变化后，与上次虚拟DOM节点比较时，只比较带有PatchFlag标记的节点
并且可以从flag信息中得知具体需要比较的内容。

比如，如下代码：

<div><p>李白乘舟将欲行</p><p>忽闻岸上踏歌声</p><p>桃花潭水深千尺</p><p>{{msg}}</p>
</div>

在vue3.0中，会被编译成：(在线编译地址)

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock("div", null, [_createVNode("p", null, "李白乘舟将欲行"),_createVNode("p", null, "忽闻岸上踏歌声"),_createVNode("p", null, "桃花潭水深千尺"),_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT类型 flag标记为1 */)]))
}

[附录：标记列表]

  TEXT = 1,// --取值是1---表示具有动态textContent的元素CLASS = 1 << 1,  // --取值是2---表示有动态Class的元素STYLE = 1 << 2,  // --取值是4---表示动态样式（静态如style="color: pink"，也会提升至动态）PROPS = 1 << 3,  // --取值是8--- 表示具有非类/样式动态道具的元素。FULL_PROPS = 1 << 4,  // --取值是16---表示带有动态键的道具的元素，与上面三种相斥HYDRATE_EVENTS = 1 << 5,  // --取值是32---表示带有事件监听器的元素STABLE_FRAGMENT = 1 << 6,   // --取值是64---表示其子顺序不变，不会改变自顺序的片段。 KEYED_FRAGMENT = 1 << 7, // --取值是128---表示带有键控或部分键控子元素的片段。UNKEYED_FRAGMENT = 1 << 8, // --取值是256---子节点无key绑定的片段（fragment）NEED_PATCH = 1 << 9,   // --取值是512---表示只需要非属性补丁的元素，例如ref或hooksDYNAMIC_SLOTS = 1 << 10,  // --取值是1024---表示具有动态插槽的元素

2.hoistStatic 静态提升

vue2.0中，在更新时，元素即使没有变化，也会重新创建进行渲染
vue3.0中，不参与更新的元素；会静态提升，只创建一次下次渲染直接复用。
因此在vue3.0中复用更多，创建次数更少，速度更快。

<div><p>李白乘舟将欲行</p><p>忽闻岸上踏歌声</p><p>桃花潭水深千尺</p><p>{{msg}}</p>
</div>

静态提升之前：

export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock("div", null, [_createVNode("p", null, "李白乘舟将欲行"),_createVNode("p", null, "忽闻岸上踏歌声"),_createVNode("p", null, "桃花潭水深千尺"),_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)]))
}

静态提升之后：

// 注意这里，无需更新的元素只创建一次，后续直接引用
const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "李白乘舟将欲行", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "忽闻岸上踏歌声", -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__*/_createVNode("p", null, "桃花潭水深千尺", -1 /* HOISTED */)export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock("div", null, [_hoisted_1, // 直接引用_hoisted_2, // 直接引用_hoisted_3, // 直接引用_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)]))
}

3.cachehandlers 事件侦听缓存

默认情况下 onClick 被视为动态绑定，因此会追踪它的变化
事件绑定的函数为同一个，因此不追踪它的变化，直接缓存后进行复用

<div><button @click="onClick">点击按钮</button>
</div>

开启缓存前：

export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock("div", null, [_createVNode("button", { onClick: _ctx.onClick }, "点击按钮", 8 /* PROPS */, ["onClick"])]))
}

此时可以看到，编译后会带上一个值为 ‘8’ 的标记，意味着会被追踪

开启缓存后：

export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock("div", null, [_createVNode("button", {onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.onClick && _ctx.onClick(...args)))}, "点击按钮")]))
}

此时，已经没有了标记，不会再被追踪

4.ssr渲染

当有大量静态的内容时候，这些内容会被当做纯字符串推进一个buffer里面，即使存在动态的绑定，会通过模板插值嵌入进去。这样会比通过虚拟dmo来渲染的快上很多很多。
当静态内容大到一定量级时候，会用_ createStaticVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象，然后根据对象渲染。