vue3的特点

具体优化

  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---表示具有动态插槽的元素

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

如
vue2中

<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div>{{name}}</div>

vue3中

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createElementVNode("div", null, "Hello World"),
    _createElementVNode("div", null, "Hello World"),
    _createElementVNode("div", null, "Hello World"),
    _createElementVNode("div", null, "Hello World"),
    _createElementVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */)
  ], 64 /* text文本在这里标记为1*/)) 
} 

// Check the console for the AST

具体来说：
在vue2.0中对于数据变化后重新渲染的DOM树，会与上次渲染的DOM树逐个比较节点
在vue3.0的diff中，创建虚拟DOM时，会根据该DOM是否会变化而添加静态标记，数据更新需要生成新的虚拟DOM时，只会与上次渲染的且被标记的节点比较。
不同的动态变化类型，为了便于区分，标记的数值也不同
因此在vue3.0中比较次数更少，效率更高，速度更快

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

<div>Hello World 一</div>
<div>Hello World 二</div>
<div>Hello World 三</div>
<div>{{name}}</div>

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "Hello World 一", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "Hello World 二", -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__*/_createElementVNode("div", null, "Hello World 三", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _hoisted_1,  /*直接复用 不参与_createElementVNode*/
    _hoisted_2, /*直接复用 不参与_createElementVNode*/
    _hoisted_3,  /*直接复用 不参与_createElementVNode*/
    _createElementVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */)
  ], 64 /* 更新参与重新创建 */))
}

// Check the console for the AST

三、cachehandlers 事件侦听缓存
onClick默认视为动态绑定，因此会追踪它的变化
事件绑定的函数为同一个，因此不追踪它的变化，直接缓存后进行复用
同样的，在编译中进行演示

 <button @click='Pooo'>点击</button>

开启时间监听缓存前

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

开启时间监听缓存后，没有静态标记8，在vue3的diff算法中，只有静态标记才会进行标记，才会追踪

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", null, [
    _createElementVNode("button", {
      onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.Pooo && _ctx.Pooo(...args)))
    }, "点击")
  ]))
}