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或hooks
  DYNAMIC_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,就不需要创建对象，然后根据对象渲染。