Vue 3 中必须用 :style 绑定 JavaScript 对象（如 {"--primary-color": primaryColor}）来动态设置 CSS 变量，直接写 style="--color: {{ color }}" 无效；Vue 2 不支持该特性。
Vue 3 中 v-bind 绑定 CSS 变量必须用 style 对象语法
直接在 style 属性里写 --color: {{ themeColor }} 是无效的——Vue 不会解析双大括号。必须用 :style 绑定一个 JavaScript 对象，且键名需用引号包裹（因为 CSS 变量含连字符）。
-
--primary-color必须写成"--primary-color"，否则会被当作非法标识符报错 - 值支持响应式变量、计算属性或函数返回值，但不能是模板字符串或表达式语句
- 不建议在循环中频繁生成新对象（如
:style="{ '--index': index }"），可能触发多余重渲染
<div :style="{ '--primary-color': primaryColor, '--gap': gap + 'px' }">
内容
</div>
Vue 2 不支持原生 v-bind 绑定 CSS 变量
Vue 2 的 :style 仅解析驼峰/短横线风格的 CSS 属性（如 backgroundColor 或 margin-top），遇到 --xxx 会静默忽略，控制台无报错但样式不生效。
- 兼容方案：用
document.documentElement.style.setProperty()手动设置 :root 变量（适合全局主题切换） - 组件级局部变量？只能靠内联
style字符串拼接（不推荐，无响应性）：:style="`--item-height: ${height}px`" - 升级 Vue 3 是最彻底的解法；若无法升级，建议用 CSS-in-JS 库（如
styled-components或emotion）替代
绑定失败常见原因和排查顺序
页面没变色、开发者工具里看不到自定义属性？按这个顺序查：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 确认 Vue 版本：
console.log(Vue.version)—— 必须 ≥ 3.2（3.0–3.1 需开启compilerOptions配置） - 检查变量是否为
ref或reactive—— 普通对象属性不会触发更新 - 打开浏览器 Elements 面板，看元素上是否渲染出
style="--xxx: value"，而不是只在 computed style 里出现 - 注意作用域：CSS 变量需在后代选择器中用
var(--xxx)读取，:style绑定本身只是“设值”，不自动应用
配合 :deep() 在 scoped 样式中使用 CSS 变量
scoped 组件里，CSS 变量虽已设在元素上，但子组件的 .child { color: var(--primary-color); } 可能因选择器提升失效。
立即学习“前端免费学习笔记（深入）”；
- 必须用
:deep()确保变量被后代读取：:deep(.child) { color: var(--primary-color); } - 如果子组件是第三方库（如 Element Plus），且未暴露 CSS 变量 API，
:deep()仍可能被 Shadow DOM 或样式隔离阻断 - 更稳的方式：把变量挂到
:root或父容器，并用属性选择器限定作用域，例如[data-theme="dark"] .btn { --btn-bg: #333; }
