乐趣区

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

shapeFLag

vnodeshapeFLag 属性应用二进制的形式形容了组件的类型。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 之后,patchFlagPatchFlags.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>标签绑定了动静的 classstyletextContent,所以patchFlagPatchFlags.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>标签绑定了动静的 titletextContent,所以patchFlagPatchFlags.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 属性,所以 patchFlagPatchFlags.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 类型的 vnodepatchFlagPatchFlags.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 类型的 vnodepatchFlagPatchFlags.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 类型的 vnodepatchFlagPatchFlags.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> 对应的 vnodepatchFlag均为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 都可能发生变化,所以它们对应的 vnodepatchFlagPatchFlags.DYNAMIC_SLOTS

Vue SFC Playground

PatchFlags.DEV_ROOT_FRAGMENT

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

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

Vue SFC Playground

PatchFlags.HOISTED

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

<h1><p> 标签都是两个动态标签,所以它们对应的 vnodepatchFlagPatchFlags.HOISTED

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

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

Vue SFC Playground

退出移动版