vue中:style绑定css变量必须用引号包裹键名如'--primary-color'，否则javascript报错；值会原样透传至dom的style属性，但需确保变量在作用域内被定义且被var()引用，否则静默失效。
直接用 :style 绑定 CSS 变量会失效？
不是 Vue 本身不支持，而是 CSS 变量（--xxx）必须写在元素的 style 属性里才生效，而 Vue 的 :style 默认只处理普通 CSS 属性（如 color、background），不会自动把 --primary-color 这类变量名当合法属性传过去——浏览器直接忽略它。
:style 中正确写法：用对象键名加引号包裹变量名
必须把 CSS 变量名用引号包起来，否则 JavaScript 解析时会当成非法标识符报错（Unexpected token -）。Vue 会原样透传到 DOM 的 style 属性中。
:style="{ '--primary-color': primaryColor, 'font-size': fontSize + 'px' }"- 变量值可以是字符串、数字（Vue 会自动加
px）、或带单位的字符串 - 不要写成
--primary-color: primaryColor（没引号 → 语法错误） - 如果值来自响应式数据（
ref或data），修改后会自动更新样式
全局 CSS 变量 vs 局部作用域：别漏掉 :root 或父级作用域
CSS 变量有继承性，但必须先在某个作用域里被定义过，动态设置才有意义。常见踩坑点：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 只在组件内
:style设置了--bg-color，但没在:root或父容器声明默认值 → 浏览器找不到该变量，回退为 inherit 或 initial - 想控制子组件样式？得确保子组件的 CSS 规则用了
var(--bg-color)，且作用域能访问到该变量（比如子组件没用scoped，或父组件通过:deep()透传） - 用
scoped的组件里，CSS 变量仍可生效，因为它是运行时注入 style 属性，和选择器作用域无关
性能注意：避免高频重设大量 CSS 变量
CSS 变量本身开销小，但频繁触发 :style 更新（比如在 @input 或 scroll 里）会导致连续重排重绘。
- 优先用 class 切换预设变量组（如
:class="{ 'theme-dark': isDark }"，再在 CSS 里定义.theme-dark { --text-color: #fff; }） - 真要动态计算，加防抖（
useDebounce）或节流 - 不要在一个
:style对象里重复设置未变化的变量，Vue 不做 diff，每次都会全量写入style属性
最常被忽略的是变量定义位置和引用一致性——设了变量但没地方用，或者用了却没在任何作用域里声明初始值，样式就静默失败了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
