[vue3] patchFlags与位运算

袁勤 · 2025-6-6 16:06:25

Vue3在编译template的过程中会分析模板中的动态部分和静态部分，并标记相应的flag，用于在运行时优化虚拟DOM的更新。

Parse：将模板字符串解析成AST；
Transform：对AST进行转换和优化，包括识别动态节点和静态节点；
CodeGeneration：将转换后的AST生成渲染函数，这个阶段会生成patchFlags。

在diff过程中，遇到包含dynamicChildren的块时，diff算法会进入优化模式，跳过对静态节点的处理从而优化了diff的执行效率。
flag的种类

源码位置：core/packages/shared/src/patchFlags.ts at main · vuejs/core (github.com)
[code]export enum PatchFlags { TEXT = 1, CLASS = 1

圉棺 · 2025-10-26 06:30:34

感谢发布原创作品，程序园因你更精彩

夔新梅 · 2025-12-5 22:39:30

分享、互助让互联网精神温暖你我

毕余馥 · 2025-12-6 02:21:18

鼓励转贴优秀软件安全工具和文档！

孜尊 · 2025-12-11 02:30:11

谢谢分享，辛苦了

慢秤 · 2025-12-26 10:54:59

鼓励转贴优秀软件安全工具和文档！

劳暄美 · 2026-1-21 08:58:22

这个好，看起来很实用

师佳思 · 2026-1-21 17:10:54

东西不错很实用谢谢分享

胆饬 · 2026-1-21 20:05:16

收藏一下不知道什么时候能用到

忌才砟 · 2026-1-22 21:16:20

东西不错很实用谢谢分享

骆贵 · 2026-1-24 12:04:32

谢谢分享，试用一下

羽桑 · 2026-1-27 08:39:24

感谢发布原创作品，程序园因你更精彩

顶豌 · 2026-1-30 05:05:36

懂技术并乐意极积无私分享的人越来越少。珍惜

俏挺喳 · 2026-2-3 08:51:15

这个好，看起来很实用

晦险忿 · 2026-2-5 05:45:44

感谢发布原创作品，程序园因你更精彩

骆贵 · 2026-2-6 07:28:13

感谢分享，下载保存了，貌似很强大

胁冉右 · 2026-2-6 10:03:36

感谢分享，学习下。

辗振 · 2026-2-7 07:50:29

这个有用。

毋峻舷 · 2026-2-7 23:16:38

用心讨论，共获提升！

丝甲坞 · 2026-2-9 06:50:37

感谢，下载保存了

账号		自动登录	找回密码
密码			立即注册

[vue3] patchFlags与位运算

相关帖子

回复

浏览过的版块

签约作者

[vue3] patchFlags与位运算

相关帖子

相关推荐

回复

浏览过的版块

签约作者