:style绑定CSS自定义属性必须用带引号键名如'--primary-color'，否则报错或失效；值为null/undefined时属性被移除；scoped中var()依赖祖先元素设置，推荐根元素:style注入；计算属性封装更安全，SSR下:style方式更可控。
:style 绑定带引号的 --xxx 键名是最稳的路，v-bind() 语法虽简洁但有硬性限制
用 :style 绑定 --xxx 必须加引号
Vue 会把没引号的 --primary-color 当作非法 JS 标识符报错；驼峰或小写（如 primaryColor）会被转成 primarycolor:，浏览器直接忽略。只有字符串键名才能被识别为 CSS 自定义属性。
-
:style="{ '--bg': bgValue, '--size': size + 'px' }"✅ 正确 -
:style="{ --bg: bgValue }❌ 报错：Unexpected token '-' -
:style="{ bg: bgValue }❌ 无效：生成bg: xxx，非标准属性 - 值为
null或undefined时，该自定义属性会被完全移除，不是设为空字符串
v-bind() 在 <style> 中直接用变量要满足三条件
这个写法看着干净，但不是所有项目都能用：必须是 Vue ≥3.4、Vite ≥4.3（或对应支持的构建工具）、且变量声明在 setup 顶层（不能藏在函数里）。
-
<style scoped>中写color: var(--text-color);，再在<script setup>里定义const textColor = ref('#333')，然后用v-bind(textColor)注入 - 不满足任一条件（比如用 Options API 或旧版 Vite），编译会静默失败，
var()读不到值，最终 fallback 到 CSS 默认色 -
v-bind()不支持嵌套对象或计算属性返回的对象，只接受响应式基础类型（ref、computed返回的字符串/数字）
scoped 样式里 var(--xxx) 拿不到值？检查作用域链
CSS 自定义属性靠继承，<style scoped> 里的 var(--xxx) 能否生效，取决于该变量是否在祖先元素上设置 —— 而不是“同组件内定义了就行”。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 推荐统一在组件根元素用
:style注入：<div :style="{ '--bg': bg }">...</div> - 避免在子元素的 scoped 样式中直接写
div.child { background: var(--bg); }，除非你确认.child的某个父级（含根元素）已设了--bg - 含
<slot>或异步加载的子组件时，它们的 DOM 可能不在当前组件根元素内部，var()会断链 - 调试时打开 DevTools → Elements → 选中根元素 → Styles 面板，确认
--xxx是否出现在“Styles”里（不是“Computed”）
多个动态变量组合时别在模板里写复杂表达式
把三四个三元判断塞进 :style 对象里，不仅难读，还会因某个响应式依赖未定义（比如 theme 还没初始化）导致整个绑定中断，其他样式全丢。
- 改用计算属性封装：
const dynamicStyle = computed(() => ({ '--color': theme.value === 'dark' ? '#fff' : '#000', '--border': isOutlined.value ? '1px solid' : 'none' })) - 再模板里只写
:style="dynamicStyle"，逻辑隔离，出错不影响其他绑定 - SSR 场景下，构建工具无法校验
var(--xxx)是否真被注入，所以服务端渲染时容易漏变量 ——:style方式更可控
真正麻烦的不是怎么写，而是变量注入位置和作用域边界——CSS 自定义属性不会自动跨组件传播，也不会因为你在 <style> 里写了 --x 就全局可用。每次想用 var()，先想清楚它从哪来、在哪生效、谁负责提供。
