Vue编译器通过静态分析在AST阶段标记动态属性并打PatchFlag，运行时diff仅处理变化节点；动态属性依语法结构识别：{{}}标TEXT、:attr标对应Flag、v-bind="[key]"单独建表达式节点、混合值拆解优化、v-bind="obj"轻量透传、插槽按需懒执行、class/style由专用模块处理。
Vue 编译器对动态属性绑定的处理，核心在于“静态分析先行、运行时最小干预”。它不等组件渲染再判断哪些属性会变，而是在模板解析成 AST 的第一时间，就依据语法规则标记出所有潜在动态点，并为它们打上精确的 PatchFlag。这样，运行时 diff 阶段就能跳过静态部分，只聚焦真正可能变化的节点。
动态属性如何被编译器一眼识别？
编译器通过语法结构直接判定，不执行表达式，只做模式匹配：
-
{{ }}：整个文本节点标记为
TEXT（PatchFlag = 1），后续 diff 只比对文本内容 -
:class、:style、:id 等带冒号的绑定：提取右侧表达式（如
cls或getProp()），不求值，仅生成 AST 表达式节点，并打对应标志（CLASS=2、STYLE=4、PROPS=8） - v-bind:[key]：方括号内视为动态参数，单独建表达式节点，确保每次 patch 都重新计算
-
混合属性值，例如
title="Hello {{ name }}"：拆解为静态字符串 + 动态插值片段，静态部分可提升（hoist），动态部分单独标记
v-bind="obj" 的特殊优化逻辑
这不是简单展开对象，而是编译与运行时协同的轻量透传：
- 编译阶段识别为 DynamicProps 类型（AST type = 8），保留表达式字符串（如
"obj"），不解析字段 - 静态属性（如
v-bind:key）仍合并进props数组，动态部分单独拎出，render 函数形如createElement(tag, { staticProps, _ctx.obj }) - 运行时
createVNode对响应式对象做浅层包装（shallowReadonly），直接赋值给vnode.props，避免Object.keys()遍历 - 更新时只做引用比较（
===）：若obj是同一响应式对象，即使内部属性变了，也不触发子组件重 patch
动态插槽的按需识别策略
插槽不是全盘动态，而是分层收敛、锚点隔离：
立即学习“前端免费学习笔记（深入）”；
- 显式
<slot name="xxx">被视为独立静态锚点，即使被v-if包裹，条件本身也被 memo 化，避免重复求值 - 插槽内容只要含响应式依赖（
{{ }}、:class、v-show），就封装为懒执行 slot 函数，仅在子组件调用renderSlot时才执行 - 作用域数据在子组件上下文中求值，保障响应链隔离；高频切换分支建议配合
<keep-alive>缓存 vnode - 写法上推荐显式
<template v-slot:xxx>，并将复杂逻辑移到作用域参数中（如传{ loading, data }），而非写在插槽模板里
class 与 style 绑定的底层支撑
这两类绑定有专用模块处理，不只是通用属性：
-
class：由
src/core/vdom/modules/class.js处理，支持对象/数组语法，自动合并、去重、响应式更新 -
style：由
src/core/vdom/modules/style.js处理，支持驼峰/短横线写法，自动添加浏览器前缀，diff 时只比对变更字段 - 复杂逻辑建议抽到计算属性或方法中，避免模板内嵌套过多表达式，既提升可读性，也利于编译器静态分析
