袁勤 发表于 2025-6-6 16:06:25

[vue3] patchFlags与位运算

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)
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

感谢，下载保存了
页: [1] 2
查看完整版本: [vue3] patchFlags与位运算