vue 的 patch 函数将内联 css 变量（如 --color）视为普通 style 键进行浅层 diff 和设置，不特殊解析；需注意大小写敏感、对象绑定、作用域隔离及 ssr 默认值问题。
Vue.js 的 patch 函数在更新 DOM 时，对带有内联 CSS 变量（如 style="--color: red"）的 VNode 并不会特殊处理——它按标准 style 对象逻辑合并、diff 和应用，但需注意变量名大小写、作用域穿透和 SSR 兼容性等细节。
内联 CSS 变量如何被 patch 解析
Vue 将 v-bind:style 或模板中 style="..." 解析为 JavaScript 对象。例如：
<div :style="{ '--primary-color': themeColor, 'color': 'var(--primary-color)' }">
<p>会被编译为 VNode 的 <code>data.style 对象：
{ "--primary-color": "blue", "color": "var(--primary-color)" }
patch 过程中，这个对象会与旧 style 对象做浅层 diff：只比对 key（属性名），逐个设置或移除对应 CSS 属性。CSS 变量名（如 --primary-color）被视为普通样式键，不作额外解析或校验。
动态更新 CSS 变量时的关键注意事项
-
变量名区分大小写：CSS 自定义属性严格区分大小写，
--MainColor和--maincolor是两个不同变量，patch 不会自动 normalize -
不能直接用
style绑定字符串：如:style="'--size: ' + size + 'px'"会报错，必须返回对象形式；推荐写法：:style="{ '--size': size + 'px' }" -
父级变量在子组件中不可见：若父组件设置了
--theme，子组件 VNode 的 patch 不会自动继承该变量作用域；需显式透传或使用 CSS-in-JS 方案 -
SSR 渲染时变量值为空白：服务端无运行时上下文，
themeColor若未预设默认值，将输出style="--primary-color: "，可能触发浏览器重排或样式失效
避免 patch 失效的实用写法
- 统一用计算属性封装变量对象：
computed: { styleVars() { return { '--accent': this.accent, '--radius': this.radius + 'px' }; } }
模板中直接:style="styleVars"，确保每次更新都生成新对象，触发 patch 正确 diff - 对需要响应式更新的复合变量，避免在 style 对象中嵌套计算：
❌:style="{ '--bg': `linear-gradient(${color1}, ${color2})` }"`（每次渲染都新建字符串，但 patch 无法识别内部变化）<br> ✅ 提前在 data/computed 中组合好完整值，再绑定 - 配合
key 强制重置样式状态：当 CSS 变量语义发生根本变化（如主题切换），给元素加 <code>:key="theme"，让 patch 触发全新 VNode 替换而非局部更新
调试 patch 中 CSS 变量更新的小技巧
- 在
beforeUpdate钩子中打印新旧 VNode 的elm.style.cssText，确认浏览器实际接收到的内联样式 - 使用 Chrome DevTools 的 “Computed” 面板，检查
element.style下是否列出目标变量（注意：仅显示被 JS 显式设置过的变量） - 在 patch 前手动调用
getComputedStyle(el).getPropertyValue('--my-var')，验证变量是否已生效，排除 CSS 优先级或继承干扰
