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-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 确认版本：
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 那样“挂上就生效”，而更像一个需要主动打开的开关。
