【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具有动态的classCLASS = 1 << 1,// 表示具有动态的styleSTYLE = 1 << 2,// 表示具有动态的非class和style的propsPROPS = 1 << 3,// 表示props具有动态的key,与CLASS、STYLE、PROPS冲突FULL_PROPS = 1 << 4,// 表示有监听事件(在同构期间需要添加)HYDRATE_EVENTS = 1 << 5,// 表示vnode是个children顺序不会改变的fragmentSTABLE_FRAGMENT = 1 << 6,// 表示children带有key的fragmentKEYED_FRAGMENT = 1 << 7,// 表示children没有key的fragmentUNKEYED_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
【vue3源码】十四、认识vnode中的shapeFlag和patchFlag属性相关推荐
- 你管这叫操作系统源码(十四)
文章目录 shell程序跑起来了 操作系统启动完毕 总结 shell程序跑起来了 shell只是个标准,具体的是实现有很多,比如Ubuntu18.04上,具体的shell实现是bash: ~$ ech ...
- STM32 ISP串口烧录 VB源码(一)Frame中主要控件及属性说明
一.软件外观: 二.Frame中主要控件及其属性列表 Frame主要控件及其属性列表 控件名称 控件类型 控件属性 属性值 说明 ComPortlist list ComboBox 端口列表 提示选择 ...
- 学习尤雨溪写的 Vue3 源码中的简单工具函数
大家好,我是若川.最近组织了源码共读活动.每周读 200 行左右的源码.很多第一次读源码的小伙伴都感觉很有收获,感兴趣可以加我微信ruochuan12,拉你进群学习. 初学者也能看懂的 Vue3 源码 ...
- 初学者也能看懂的 Vue3 源码中那些实用的基础工具函数
1. 前言 大家好,我是若川.最近组织了源码共读活动.每周读 200 行左右的源码.很多第一次读源码的小伙伴都感觉很有收获,感兴趣可以加我微信ruochuan12,拉你进群学习. 写相对很难的源码,耗 ...
- ABP源码分析四十七:ABP中的异常处理
ABP源码分析四十七:ABP中的异常处理 参考文章: (1)ABP源码分析四十七:ABP中的异常处理 (2)https://www.cnblogs.com/1zhk/p/5538983.html (3 ...
- Vue3源码分析之打包原理
Vue3源码分析之打包原理 如果之前你已经看过我的<Vue3源码分析之入门>,那么你可以直接阅读此篇文章 Vue3源码分析之入门 一.配置环境 1. 全局安装yarn Monorepo 管 ...
- Vue3源码解析之入门
Vue3源码分析之入门 本文主要是针对想自学Vue3之类的框架源码的,却不知道如何上手的小伙伴们~ Vue3源码GitHub地址 Vue3源码克隆路径 :git@github.com:vuejs/co ...
- vue3源码分析——实现slots
引言 <<往期回顾>> vue3源码分析--rollup打包monorepo vue3源码分析--实现组件的挂载流程 vue3源码分析--实现props,emit,事件处理等 ...
- 一点一点看JDK源码(四)java.util.ArrayList 中篇
一点一点看JDK源码(四)java.util.ArrayList 中篇 liuyuhang原创,未经允许禁止转载 本文举例使用的是JDK8的API 目录:一点一点看JDK源码(〇) 1.综述 在前篇中 ...
最新文章
- 【转】Loadrunner入门(《软件性能测试过程详解与案例剖析》)
- 【听哥一句劝,C++水很深,你把握不住啊!】C++提高班之 符与*符
- C#——《C#语言程序设计》实验报告——数据库编程——基于ADO.NET技术的数据库操作DEMO
- Kinect V2 基础教程之彩色图像
- php获取用户的上5级用户
- 如何解决 Angular custom library module 在 ng build 时无法被识别的错误
- Storm精华问答 | Kafka在Storm中的角色是什么?
- Eclipse jetty和plugin 的结合使用
- matlab——使用gird函数画背景格
- mysql sqlyog讲解_详细讲解如何用SQLyog来分析MySQL数据库
- 设置PyCharm相同词汇高亮
- Chrome 及驱动各版本下载地址
- 这几款火爆的独立游戏告诉你,寒冬?不存在的
- 最大流最小割定理证明
- 记一次阿里电话面试(java技术岗)
- 好中的计算机英文ei,电子信息类容易中的英文EI期刊有哪些
- 微信小程序之 收藏功能
- 数据、变量、内存三者之间的关系
- NRF24L01的多对一通信
- 纯前端实现—网页钟表设计