Vue 3中动态绑定CSS变量的正确方式是用:style绑定内联自定义属性，如:style="{ '--var-name': value }"；v-bind()是<style>中引用响应式变量的函数，二者适用场景不同。
Vue 3里不能用 v-bind() 直接绑定CSS变量
这是个常见误解：v-bind 是指令，不是函数，根本不存在 v-bind() 这种写法。你想做的其实是「在 CSS 中动态使用响应式 JS 变量」，核心路径是：用 :style 绑定内联样式对象，把 JS 变量转成 --my-var: value 形式的 CSS 自定义属性。
直接写 v-bind="--color: red" 会报错，因为 Vue 不解析这种字符串为 CSS 变量；而 :style="{ '--color': color }" 才是正确入口。
用 :style 注入 CSS 变量的两种写法
推荐始终用对象语法，避免字符串拼接带来的 XSS 风险和引号嵌套问题。
-
对象语法（推荐）：
:style="{ '--primary-color': primaryColor, '--spacing-xs': '0.25rem' }" -
数组语法（少用）：
:style="[baseStyles, { '--hover-opacity': hoverOpacity }]"，适合复用基础样式对象
注意：CSS 变量名必须用带引号的字符串键（如 '--size'），不能写成 --size（JS 会报语法错误）；值如果是响应式 ref，Vue 会自动解包，不用 .value。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
为什么 :style 绑定的 CSS 变量在子组件里拿不到
CSS 变量作用域是继承的，但只对后代元素生效——如果子组件用了 scoped，它的样式规则会被加上属性选择器（如 div[data-v-xxx]），而父组件注入的 :style 并不会自动带上这个属性，导致子组件无法继承这些变量。
- 子组件要读取父级注入的 CSS 变量，必须显式声明
inherit或用var(--my-var, fallback) - 更稳妥的做法是把变量注入到
<html>或<body>上（用onMounted+document.documentElement.style.setProperty） - 或者用 provide/inject 把变量值传下去，再由子组件用
:style二次注入
性能和兼容性要注意的点
频繁更新大量 CSS 变量可能触发重排（尤其在低端设备上）。别把动画帧率敏感的属性（比如 --left、--transform）全塞进 :style。
- 动画场景优先用
transform和opacity，它们走合成层，不触发重排 - IE 完全不支持 CSS 变量，Vue 3 也不支持 IE，但如果你项目还需兼容旧环境，得 fallback 到 CSS 类名切换
- 服务端渲染（SSR）时，
:style中的响应式变量初始值必须可序列化，避免ref或computed里含函数或 DOM 引用
真正麻烦的不是怎么写，而是变量该挂在哪一层——挂太浅（只在组件根元素）子组件读不到，挂太深（全局 document）又难维护。多数情况下，按业务模块边界做局部注入，比一股脑扔到 html 标签上更可控。
