Vue 3 如何使用 v-bind CSS 变量将响应式状态直接透传到样式文件中

v-bind()是Vue 3中唯一编译时将响应式变量注入CSS的机制，仅在<style scoped>或<style module>中有效，需顶层声明响应式变量并正确引用路径。

Vue 3 中，v-bind() 是唯一能让响应式状态“直接透传”进样式层的原生机制，不是靠 JS 拼字符串，也不是靠内联 :style，而是编译时就把变量注入 CSS 规则，生成带哈希前缀的自定义属性（如 --_abc123-primaryColor），再用 var() 自动读取。关键不在怎么写，而在变量是否“可被编译器看见”。

必须用 <style scoped> 或 <style module>

v-bind() 在普通 <style>（无属性）中完全无效，会被编译器静默忽略。只有两种合法容器：

1. <style scoped>：最常用，支持顶层 ref / computed / reactive 变量，写法如 color: v-bind(primaryColor);
2. <style module>：语义更严格，变量必须在 <script setup> 顶层声明，且名称需为合法 CSS 标识符（不能含 -、数字开头、空格）

变量必须是响应式且顶层暴露

编译器只收集 <script setup> 顶层声明的响应式数据，以下写法都会失效：

1. 写在函数内部：function init() { const x = ref('red') } → 不可见
2. 普通常量：const color = 'blue' → 非响应式，不触发更新
3. 未解构的对象属性：color: v-bind(theme.text) → 必须先提取：const text = computed(() => theme.value.text)
4. 路径带点但没加引号：color: v-bind(theme.primary) → 正确写法是 color: v-bind("theme.primary")

支持表达式，但要加引号包裹

v-bind() 引号内是 JS 表达式，不是模板语法，可直接拼单位或做条件判断：

1. font-size: v-bind("fontSize + 'px'");
2. opacity: v-bind("isActive ? 1 : 0.3");
3. background: hsl(v-bind("hue"), 70%, 60%);

注意：引号外仍是 CSS，所以 hsl() 这类函数要写在 v-bind() 外部，不能塞进引号里。

和 :style 绑定的区别别搞混

:style="{ '--color': color }" 和 v-bind(color) 解决的是不同问题：

1. :style 是运行时内联样式，适合给子元素传递变量（通过 var(--color) 读取），也适合做 transform/top 等数值微调
2. v-bind() 是编译时注入，生成带作用域哈希的 CSS 变量，只对当前组件的 <style scoped> 生效，不能被子组件继承
3. 想全局共享？得手动写入 document.documentElement.style.setProperty('--theme-color', value)，并注意在 onUnmounted 清理