vue 3 中 v-bind:style 绑定 css 变量不生效，90% 是因变量未被后代显式读取：需在 css 中用 var(--xxx) 调用，且确保作用域可继承、命名一致、变量已正确定义；vue 2 不支持该语法。

Vue 3 中 v-bind:style 绑定 CSS 变量不生效，90% 是因为变量没被后代真正读取，而不是 Vue 或浏览器不支持——它压根没进入样式计算链。

为什么 v-bind:style 设置了 --xxx 却看不到效果

绑定本身成功了（Elements 面板能看到 style="--color: #409eff"），但子元素没用 var(--color) 主动读取，或读取时被作用域切断。CSS 变量不是“自动应用”的属性，它只是存个值，必须显式调用才生效。

• v-bind:style 只负责“设值”，不负责“用值”；你得在 CSS 规则里写 color: var(--color)
• 如果子组件是 Web Component（如某些 UI 库封装的按钮），默认不继承 CSS 变量，需加 :host { --color: inherit; }
• scoped 样式中，.child { color: var(--color); } 可能因选择器提升失效，得改用 ::deep(.child) { color: var(--color); }
• 父组件绑定了 --size，但子组件写的是 font-size: var(--width) —— 拼错名、少单位、大小写不一致，全静默回退

:style="{ '--x': value }" 在 Vue 2 里完全不工作

Vue 2 的 :style 解析器不认识带 -- 前缀的键名，会直接忽略整条键值对，控制台无报错，DevTools 里也看不到该属性。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 确认版本：console.log(Vue.version) —— 必须 ≥ 3.2（3.0–3.1 需手动开启 compilerOptions）
• Vue 2 兼容方案只有两种：document.documentElement.style.setProperty('--x', value)（全局）或字符串拼接内联样式（:style="`--x: ${value}`"，无响应性）
• 别试图用计算属性返回字符串对象骗过 Vue 2，它仍不会识别 -- 键

为什么 DevTools 里看不到 style="--x: ..." 出现在元素上

常见于响应式数据未正确定义：非 ref() / reactive() 包裹的普通对象属性，v-bind 不会追踪更新，也不会渲染到 DOM。

• 检查变量是否为响应式：const themeColor = ref('#409eff')，不是 let themeColor = '#409eff'
• 如果用 defineProps 接收外部传入的变量，它默认是只读的，需用 toRef 或 computed 转成可响应式引用
• scoped 组件中，若父组件用 :style 绑定变量，但子组件根元素写了 all: initial，会清空包括继承在内的所有 CSS 属性，变量直接被丢弃

最易被忽略的一点：CSS 变量必须定义在能被目标元素继承的位置，且读取时必须用 var() 显式调用——它不像 class 那样“挂上就生效”，而更像一个需要主动打开的开关。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！