Vue中绑定CSS自定义属性需用带引号键名如'--primary-color'，值为null/undefined时属性被移除；scoped样式中var()依赖祖先元素设置，推荐根元素:style注入；计算属性返回新对象更安全，SSR和构建工具无法校验动态变量。
Vue中用:style绑定CSS自定义属性的正确写法
直接用:style传对象时，CSS自定义属性（--xxx）不能写成驼峰或小写键名，必须原样保留双横线前缀，且需用字符串引号包裹键名，否则会被Vue当作普通CSS属性处理而失效。
-
:style="{ '--primary-color': colorValue }"✅ 正确：键名带引号、保留-- -
:style="{ --primary-color: colorValue }❌ 报错：JS语法错误，未加引号 -
:style="{ primaryColor: colorValue }❌ 无效：Vue会转成primarycolor:，浏览器不识别 - 若值为
null或undefined，该自定义属性会被移除（不是设为空字符串）
在<style></style>里用var(--xxx)读取动态变量要避开作用域限制
Vue单文件组件中，<style scoped></style>会为元素添加属性选择器，但CSS自定义属性是继承的，var(--xxx)仍能取到——前提是变量在祖先元素上设置。如果只在组件根元素设--xxx，子组件scoped样式里的var(--xxx)可能拿不到，因为根元素和子元素不在同一DOM层级（尤其含slot或异步子组件时）。
- 推荐在
<template></template>根元素上用:style注入变量：<div :style="{ '--bg': bg }">...</div> - 避免在
<style scoped></style>里对非根元素直接用var(--xxx)，改用inherit或显式传递 - 调试时可用浏览器开发者工具检查计算样式，确认
--xxx是否出现在“Styles”面板的根元素上
多个动态变量组合时，别把:style对象写成表达式嵌套
常见错误是把逻辑判断塞进:style绑定里，比如:style="{ '--size': isLarge ? '24px' : '16px', '--color': theme === 'dark' ? '#fff' : '#000' }"。这看似简洁，但每次渲染都重新计算整个对象，影响性能；更麻烦的是，一旦某个条件依赖响应式数据出错（如theme未定义），整个:style绑定会中断，其他样式也丢失。
- 拆成计算属性更可控：
computed: { dynamicStyle() { return { '--size': this.size, '--color': this.textColor }; } }，再:style="dynamicStyle" - 需要条件逻辑时，优先在计算属性里处理，而不是在模板里写三元表达式
- 注意：计算属性返回的对象引用每次都要新创建，否则Vue无法检测变化；不要返回缓存的同一个对象
服务端渲染（SSR）或构建时提取CSS时，--xxx变量不会被提取
Webpack/Vite打包时，静态<style></style>里的var(--xxx)能被识别并保留，但通过:style动态注入的--xxx完全运行时生效，构建工具看不到，也不会做任何优化或校验。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 没有编译期提示拼写错误（比如写成
--primray-color） - 无法被PurgeCSS等工具识别，不能从最终CSS中剔除未使用的
var()调用 - SSR首屏渲染时，若
:style依赖的数据还没就绪，变量值可能是undefined，导致var(--xxx)回退到初始值或inherit - 真要用在关键视觉上，建议加一层默认值：
background: var(--bg, #eee);
