Vue3.0学习 - 第一节，diff算法、静态标记

不念不忘少年蓝@ 2022-11-18 01:44 262阅读 0赞

**第一节：**

# **\# Diff ** #

# 静态标记 #

Vue3 中仅对静态标记标记对象进行比较

[动态绑定][Link 1]

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, "Xmo"),
        _createVNode("p", null, _toDisplayString(_ctx.kkl), 1 /* TEXT */),
        _createVNode("p", null, "Xmo"),
        _createVNode("p", null, "1234"),
        _createVNode("img", { src: _ctx.img }, null, 8 /* PROPS */, ["src"])
      ]))
    }
    
    // Check the console for the AST

可以看到，源码中，对 msg 设计了静态标记，这里是1，后面跟注释 TEXT ，代表这个标签的 TEXT 数据是会动态变化的。（动态变化的东西反而叫静态标记，可还行）

_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)

*  Vue2 中的虚拟dom是进行全量的杜比
 *  Vue3 新增了静态标记（PatchFlag）
    
     *  只比对带有 PF 的节点
     *  并且通过 Flag 的信息得知当前节点要比对的具体内容

# 静态提升 #

*  vue2中无论元素是否参与更新，每次都会重新创建，然后在渲染
 *  vue3中对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可

对上面的代码开启静态提升（hoistStatic）

开启位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

开启后的效果

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
    
    const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "Xmo", -1 /* HOISTED */)
    const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "Xmo", -1 /* HOISTED */)
    const _hoisted_3 = /*#__PURE__*/_createVNode("p", null, "Xmo", -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 */),
        _createVNode("img", { src: _ctx.srci }, null, 8 /* PROPS */, ["src"])
      ]))
    }
    
    // Check the console for the AST

将静态内容提取出来，变成常量再进行赋值，只需创建一次，后面直接复用，

非静态提升：每次创建都要重新创建

静态提升：静态内容只需创建一次，后面直接复用

*  以后每次进行render的时候，就不会重复创建这些静态的内容，而是直接从一开始就创建好的常量中取就行了。

# [\#][Link 2]事件侦听器缓存 #

写一段带事件的代码

这里我们还没有开启事件监听缓存，熟悉的静态标记    `8 /* PROPS */`     出现了，它将标签的 Props （属性） 标记动态属性。

如果我们存在属性不会改变，不希望这个属性被标记为动态，那么就需要 cacheHandler 的出场了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

开启后

\_createVnode 的第二个属性，从

`{ onClick: _ctx.onClick }`

变为了

`{ onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.onClick(...args))) }`

它的意思很明显，onClick 方法被存入 cache。在使用的时候，如果能在缓存中找到这个方法，那么它将直接被使用。如果找不到，那么将这个方法注入缓存。总之，就是把方法给缓存了。

### 如果有多个标签、方法，效果 ###

import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"
    
    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))),
          onMouseover: _cache[2] || (_cache[2] = (...args) => (_ctx.onMouseover && _ctx.onMouseover(...args)))
        }, "btn", 32 /* HYDRATE_EVENTS */),
        _createVNode("button", {
          onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.onClick1 && _ctx.onClick1(...args)))
        }, "btn")
      ]))
    }
    
    // Check the console for the AST

值得注意的是，在测试过程中，只要监听了除了 click 以外的方法，都会添加 `32 /* HYDRATE_EVENTS */` 事件监听静态标记（事件的方法静态的，但监听的事件则是动态的【onMouseover是缓存的，而mouseover事件则不是】）。

总之，静态提升之后，事件就不会在 diff 算法中进行比较了。

### patchFlags 是什么 ###

export const enum PatchFlags {
      // 动态文字内容
      TEXT = 1,
    
      // 动态 class
      CLASS = 1 << 1,
    
      // 动态样式
      STYLE = 1 << 2,
    
      // 动态 props
      PROPS = 1 << 3,
    
      // 有动态的key，也就是说props对象的key不是确定的
      FULL_PROPS = 1 << 4,
    
      // 合并事件
      HYDRATE_EVENTS = 1 << 5,
    
      // children 顺序确定的 fragment
      STABLE_FRAGMENT = 1 << 6,
    
      // children中有带有key的节点的fragment
      KEYED_FRAGMENT = 1 << 7,
    
      // 没有key的children的fragment
      UNKEYED_FRAGMENT = 1 << 8,
    
      // 只有非props需要patch的，比如`ref`
      NEED_PATCH = 1 << 9,
    
      // 动态的插槽
      DYNAMIC_SLOTS = 1 << 10,
    
      // SPECIAL FLAGS -------------------------------------------------------------
    
      // 以下是特殊的flag，不会在优化中被用到，是内置的特殊flag
    
      // 表示他是静态节点，他的内容永远不会改变，对于hydrate的过程中，不会需要再对其子节点进行diff
      HOISTED = -1,
    
      // 用来表示一个节点的diff应该结束
      BAIL = -2,
    }

[Link 1]: https://vue-next-template-explorer.netlify.app/#%7B%22src%22%3A%22%3Cdiv%3E%5Cr%5Cn%20%20%3Cp%3EXmo%3C%2Fp%3E%5Cr%5Cn%20%20%3Cp%3EXmo%3C%2Fp%3E%5Cr%5Cn%20%20%3Cp%3EXmo%3C%2Fp%3E%5Cr%5Cn%20%20%3Cp%3E%7B%7Bmsg%7D%7D%3C%2Fp%3E%5Cr%5Cn%3C%2Fdiv%3E%22%2C%22options%22%3A%7B%22mode%22%3A%22module%22%2C%22prefixIdentifiers%22%3Afalse%2C%22optimizeImports%22%3Afalse%2C%22hoistStatic%22%3Afalse%2C%22cacheHandlers%22%3Afalse%2C%22scopeId%22%3Anull%2C%22ssrCssVars%22%3A%22%7B%20color%20%7D%22%2C%22bindingMetadata%22%3A%7B%22TestComponent%22%3A%22setup%22%2C%22foo%22%3A%22setup%22%2C%22bar%22%3A%22props%22%7D%7D%7D
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221022/e306a92a27814bf7a6740e8272d00428.png
[Link 2]: https://dxmo.gitee.io/views/frontend/2020/Vue/Vue3-1.html#%E4%BA%8B%E4%BB%B6%E4%BE%A6%E5%90%AC%E5%99%A8%E7%BC%93%E5%AD%98
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/a5c3ecbf728d45529864482639b5d022.png