usecssvars 是 vue 3.4+ 编译器自动生成的内部函数，无需手动 import 或调用；仅在 中配合 v-bind() 使用才生效，变量需为响应式且作用域限于当前组件。
Vue 3.4+ 中 useCssVars 不是手动调用的 Hook，而是编译器自动生成的内部函数——你**不需要显式 import 或调用它**。它的作用是在组件 setup 阶段自动将响应式变量注入到 CSS 变量中，前提是必须配合 <style module></style> 和 v-bind() 使用。
关键前提：必须用
只有带 module 属性的 style 标签才启用 v-bind 响应式绑定机制。普通 <style></style> 或 <style scoped></style> 中写 v-bind(color) 会被忽略，浏览器开发者工具里完全看不到对应 CSS 变量。
- ✅ 正确写法：
<style module></style> - ❌ 无效写法：
<style scoped></style>、<style></style>、<style lang="scss" module></style>（SCSS 不支持 v-bind，需用原生 CSS）
v-bind() 的写法和限制
在 <style module></style> 内部，直接在 CSS 声明块中使用 v-bind(变量名)，它会被编译成带哈希前缀的 CSS 自定义属性（如 --c845efc6-color），并自动挂载到组件根元素上。
- 变量名必须是合法 CSS 标识符（不能以破折号开头、不能含空格或特殊符号）
- 只能出现在 {} 声明块内，不能用于选择器、@media、嵌套规则中
- 不支持表达式，只接受顶层响应式变量名：
v-bind(theme.primary)报错；需先解构：const primary = computed(() => theme.value.primary) - 值类型会自动转字符串：number → 加 px（如
16→"16px"），string 原样输出，null/undefined → 空字符串（建议设默认值避免样式断裂）
响应式变量必须是 ref / computed / reactive
v-bind() 绑定的 JS 变量必须是响应式的，否则值变化不会触发 CSS 变量更新。
- ✅ 支持：
const color = ref('#333')、const size = computed(() => props.width + 'px')、const state = reactive({ bg: 'blue' }) - ❌ 不支持：
let color = '#333'（非响应式）、const color = 'red'（常量）
为什么子组件拿不到这些变量？
<style module></style> 中的 v-bind 变量作用域仅限当前组件，不会继承给子组件。这不是 bug，是设计使然。
- 父组件设置的
--xxx只影响自身及其普通 DOM 后代（非 shadow DOM） - 子组件若用了 Web Component、all: initial/unset、或未主动用
var(--xxx)读取，就无法生效 - 如需跨组件共享，应改用全局 CSS 变量（如 :root 定义）或通过 props + :style 透传
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
