【vue3源码】、认识vnode中的shapeFlag和patchFlag属性

在Vue3的源码中，vnode对象中的shapeFlag和patchFlag是用于优化虚拟DOM diff算法的标志位。这两个属性被赋予了特定的数字，代表不同的含义。

• shapeFlag: 用于区分vnode的类型，比如是元素节点、组件节点还是文本节点等。
• patchFlag: 用于描述vnode的patch行为，比如是否为动态节点、是否需要处理子节点变化等。

这两个标志位在diff算法中起着至关重要的作用，它们帮助算法尽可能地只对需要更新的部分进行处理，从而提高了渲染的效率。

以下是一个简单的例子，展示了如何在Vue3的源码中使用这两个属性：

import { shapeFlag, patchFlag } from 'vue';
 
// 创建一个元素节点的vnode
const vnode = {
  shapeFlag: shapeFlag.ELEMENT,
  patchFlag: patchFlag.TEXT | patchFlag.CLASS, // 假设有文本更新和class绑定
  // ... 其他属性
};
 
// 判断vnode的类型
if (vnode.shapeFlag & shapeFlag.ELEMENT) {
  // 是元素节点
}
 
// 判断vnode需要处理的patch行为
if (vnode.patchFlag & patchFlag.TEXT) {
  // 文本可能发生了变化
}
if (vnode.patchFlag & patchFlag.CLASS) {
  // class绑定可能发生了变化
}

在实际的Vue3源码中，这些标志位会在不同的函数中被设置和使用，以确保虚拟DOM的高效更新。