唯一可行路径是使用:style绑定css变量，键名必须加引号如'--primary-color'，值可为字符串、数字或带单位字符串，混用原生属性与css变量无冲突。
直接用 :style 绑定 --xxx 变量是唯一可行路径
Vue 3 不支持在模板中写 style="--color: {{ color }}"，也不支持 v-bind:--color="color" 这类语法——浏览器不认这种 attribute，Vue 也不会解析。真正起作用的只有 :style 这个绑定方式，它把对象转为 DOM 的 style 属性，而 CSS 自定义属性（--xxx）必须作为对象的键显式传入。
关键约束有三个：
-
--xxx键名必须加引号，否则 JS 解析报错：{ '--primary-color': color }✅，{ --primary-color: color }❌ - 键名不能驼峰或去横线：
{ primaryColor: color }或{ 'primary-color': color }都无效 - 值为
null或undefined时，该自定义属性会被从内联样式中移除，不是设为空字符串
:style 对象里混用原生 CSS 属性和 --xxx 变量没问题
你完全可以在同一个 :style 对象里同时写常规样式和自定义属性，Vue 内部会一并处理：
<div :style="{
color: textColor,
fontSize: `${fontSize}px`,
'--bg-opacity': opacity,
'--border-radius': 'var(--radius, 4px)'
}">
<p>注意两点：</p>
<ul>
<li>原生属性名可用驼峰（<code>backgroundColor</code>）或短横线（<code>'background-color'</code>），Vue 自动标准化</li>
<li>
<code>--xxx</code> 变量值如果是数值（如 <code>0.8</code>），Vue 会自动转成字符串 <code>"0.8"</code>，无需手动 <code>String()</code>
</li>
<li>但别在 <code>:style</code> 里写 <code>var(--xxx)</code> ——那是 CSS 函数，只能放在 <code><style></style></code> 里用</li>
</ul>
<h3>
<code><style scoped></style></code> 里用 <code>var(--xxx)</code> 要小心作用域链</h3>
<p>你在根元素上通过 <code>:style="{ '--color': color }"</code> 设置了变量，子元素的 <code><style scoped></style></code> 里写 <code>color: var(--color)</code> 看似合理，但可能不生效。</p>
<p>原因在于：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill1140" title="Vue"><img
src="https://img.php.cn/upload/skill/000/000/081/178797612947731.jpg" alt="Vue" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill1140" title="Vue" class="overflowclass">Vue</a>
<p class="overflowclass">避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。</p>
</div>
<a rel="nofollow" href="/xiazai/skill1140" title="Vue" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>
<code><style scoped></style></code> 会给选择器加属性哈希（如 <code>.foo[data-v-abc123]</code>），但 CSS 自定义属性靠继承，不是靠选择器匹配</li>
<li>如果子元素不在根元素的 DOM 子树内（比如用了 <code><slot></slot></code>、异步组件、Teleport 到 body），就拿不到祖先设的 <code>--xxx</code>
</li>
<li>推荐做法：在组件根元素上设置变量，并确保所有依赖它的子元素都在其内部渲染；若需跨组件传递，改用 <code>:root</code> 或 provide/inject 控制变量注入点</li>
</ul>
<h3>计算属性返回新对象比模板里拼对象更安全</h3>
<p>别在模板里写这种逻辑：</p>
<pre class="brush:php;toolbar:false;"><div :style="{ '--size': size + 'px', '--delay': isSlow ? '2s' : '0.3s' }">
<p>问题很明显：</p>
<ul>
<li>每次重渲染都新建对象，哪怕值没变，也可能触发多余样式更新</li>
<li>无法复用、难测试、逻辑一复杂就失控</li>
<li>SSR 和构建工具对动态 key 名（如 <code>--${name}</code>）无校验能力，出错难定位</li>
</ul>
<p>换成计算属性：</p>
<pre class="brush:php;toolbar:false;">const dynamicVars = computed(() => ({
'--size': `${size.value}px`,
'--delay': isSlow.value ? '2s' : '0.3s'
}))
这样既保证响应式更新精准，又方便抽离、复用和单元测试。
最常被忽略的一点：CSS 自定义属性本身没有类型系统，--opacity: 0.5 和 --opacity: "0.5" 在浏览器里等价，但如果你传的是布尔值或对象，Vue 会调用 toString()，结果可能是 "[object Object]"——务必提前做类型守卫或转换。
