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