关于前端:vue3源码十四认识vnode中的shapeFlag和patchFlag属性

shapeFLag

vnode的 shapeFLag 属性应用二进制的形式形容了组件的类型。shapeFLag的值的类型是个枚举：

export const enum ShapeFlags {
  ELEMENT = 1, // 示意一个一般的 HTML 元素
  FUNCTIONAL_COMPONENT = 1 << 1, // 函数式组件
  STATEFUL_COMPONENT = 1 << 2,  // 有状态组件
  TEXT_CHILDREN = 1 << 3, // 子节点是文本
  ARRAY_CHILDREN = 1 << 4, // 子节点是数组
  SLOTS_CHILDREN = 1 << 5, // 子节点是插槽
  TELEPORT = 1 << 6, // 示意 vnode 形容的是个 teleport 组件
  SUSPENSE = 1 << 7, // 示意 vnode 形容的是个 suspense 组件
  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8, // 示意须要被 keep-live 的有状态组件
  COMPONENT_KEPT_ALIVE = 1 << 9, // 曾经被 keep-live 的有状态组件
  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT // 组件，有状态组件和函数式组件的统称
}

一个 vnode 能够是多个不同的的类型，如：

vnode.shapeFlag = ShapeFlags.ELEMENT | ShapeFlags.ARRAY_CHILDREN

判断某个 vnode 的类型时能够应用 vnode.shapeFlag & ShapeFlags.ELEMENT 的形式进行判断，或判断 vnode 是否同时是多种类型vnode.shapeFlag & ShapeFlags.ELEMENT | ShapeFlags.ARRAY_CHILDREN

patchFlag

patchFlag是在编译 template 模板时，给 vnode 增加的一个标识信息，这个标识信息反映了 vnode 的哪些部位绑定了动静值，这样在 runtime 阶段，能够依据 patchFlag 判断出哪些内容须要更新，实现靶向更新。

patchFlag的类型和 shapeFLag 雷同，也是个枚举类型：

export const enum PatchFlags {
  // 示意 vnode 具备动静 textContent 的元素
  TEXT = 1,
  // 示意 vnode 具备动静的 class
  CLASS = 1 << 1,
  // 示意具备动静的 style
  STYLE = 1 << 2,
  // 示意具备动静的非 class 和 style 的 props
  PROPS = 1 << 3,
  // 示意 props 具备动静的 key，与 CLASS、STYLE、PROPS 抵触
  FULL_PROPS = 1 << 4,
  // 示意有监听事件(在同构期间须要增加)
  HYDRATE_EVENTS = 1 << 5,
  // 示意 vnode 是个 children 程序不会扭转的 fragment
  STABLE_FRAGMENT = 1 << 6,
  // 示意 children 带有 key 的 fragment
  KEYED_FRAGMENT = 1 << 7,
  // 示意 children 没有 key 的 fragment
  UNKEYED_FRAGMENT = 1 << 8,
  // 示意 vnode 只须要非 props 的 patch。例如只有标签中只有 ref 或指令
  NEED_PATCH = 1 << 9,
  // 示意 vnode 存在动静的插槽。例如动静的插槽名
  DYNAMIC_SLOTS = 1 << 10,
  // 示意用户在模板的根级别存在正文而创立的片段，这是一个仅用于开发的标记，因为正文在生产中被剥离
  DEV_ROOT_FRAGMENT = 1 << 11,
  
  // 以下都是一些非凡的 flag，它们不能应用位运算进行匹配
  // 示意 vnode 通过动态晋升
  HOISTED = -1,
  // diff 算法应该退出优化模式
  BAIL = -2
}

以下是针对不同 patchFlag 的一些示例

PatchFlags.TEXT

<script setup>
import {ref} from 'vue';

const msg = ref('Hello')
</script>

<template>
  <h1>{{msg}}</h1>
</template>

<h1>标签中只绑定了动静的 textContext，所以以上模板转为vnode 之后，patchFlag为PatchFlags.TEXT。

你能够将代码复制在 Vue SFC Playground 中进行测试。

PatchFlags.CLASS、PatchFlags.STYLE

<script setup>
import {ref, reactive} from 'vue'
  
const msg = ref('Hello')
const style = reactive({fontSize: '24px'})
const classObj = ref('red')
</script>

<template>
  <h1 :class="classObj" :style="style">{{msg}}</h1>
</template>

<style>
  .red {color: red;}
</style>

<h1>标签绑定了动静的 class、style、textContent，所以patchFlag 为PatchFlags.TEXT | PatchFlags.CLASS | PatchFlags.STYLE

Vue SFC Playground

PatchFlags.PROPS

<script setup>
import {ref} from 'vue'

const msg = ref('Hello')
</script>

<template>
  <h1 :title="msg">{{msg}}</h1>
</template>

<h1>标签绑定了动静的 title、textContent，所以patchFlag 为PatchFlags.TEXT | PatchFlags.PROPS

Vue SFC Playground

PatchFlags.FULL_PROPS

<script setup>
import {ref} from 'vue'

const msg = ref('Hello')
const dynamicKey = ref('foo')
</script>

<template>
  <h1 :[dynamicKey]="msg" >{{msg}}</h1>
</template>

<h1>标签绑定了动静的 textContent 和一个动静的 dynamicKey 属性，所以 patchFlag 为PatchFlags.TEXT | PatchFlags.FULL_PROPS

Vue SFC Playground

PatchFlags.STABLE_FRAGMENT

<script setup>
import {ref} from 'vue'

const msg = ref('Hello')

function handleClick() {classObj.red = !classObj.red}
</script>

<template>
  <h1 @click="handleClick" >{{msg}}</h1>
  <span>text</span>
</template>

<template>标签中有多个根标签，会创立一个 Fragment 类型的 vnode，因为<h1>、<span> 标签的程序始终不会发生变化，所以 Fragment 类型的 vnode 的patchFlag为PatchFlags.STABLE_FRAGMENT。

Vue SFC Playground

PatchFlags.KEYED_FRAGMENT

<script setup>
import {reactive} from 'vue'

const data = reactive(['one', 'two', 'three'])
</script>

<template>
  <span v-for="item in data" :key="item">{{item}}</span>
</template>

<template>标签中有多个根标签，而且每个标签都有 key，所以Fragment 类型的 vnode 的patchFlag为PatchFlags.KEYED_FRAGMENT

Vue SFC Playground

PatchFlags.UNKEYED_FRAGMENT

<script setup>
import {reactive} from 'vue'

const data = reactive(['one', 'two', 'three'])
</script>

<template>
  <span v-for="item in data">{{item}}</span>
</template>

<template>标签中有多个根标签，但标签都没有 key，所以Fragment 类型的 vnode 的patchFlag为PatchFlags.UNKEYED_FRAGMENT

Vue SFC Playground

PatchFlags.NEED_PATCH

<script setup>
import {ref} from 'vue'

const dom = ref()

const vFocus = {mounted: (el) => el.focus()}
</script>

<template>
  <input v-focus />
  <h1 ref="dom">Hello</h1>
</template>

<input/>和 <h1> 对应的 vnode 的patchFlag均为PatchFlags.NEED_PATCH

Vue SFC Playground

PatchFlags.DYNAMIC_SLOTS

<template>
  <Comp>
    <template #one v-if="ok">hello</template>
  </Comp>

  <Comp>
    <template v-for="name in list" #[name]>{{name}}</template>
  </Comp>
</template>

两个 <Comp> 中的 slot 都可能发生变化，所以它们对应的 vnode 的patchFlag为PatchFlags.DYNAMIC_SLOTS

Vue SFC Playground

PatchFlags.DEV_ROOT_FRAGMENT

<template>
 <!-- title -->
 <h1>Hello</h1>
</template>

<template>的根级存在正文，同时有多个标签，便签程序不会变动，所以根 vnode 的patchFlag为PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT

Vue SFC Playground

PatchFlags.HOISTED

<template>
  <h1>Hello</h1>
  <p>test</p>
</template>

<h1>和 <p> 标签都是两个动态标签，所以它们对应的 vnode 的patchFlag为PatchFlags.HOISTED

如果只存在一个动态标签，这个动态标签对应的 vnode 的patchFlag不是PatchFlags.HOISTED，而是默认的 0

<template>
     <h1>Hello</h1>
</template>

Vue SFC Playground