CSS变量无法被JS直接监听，需通过监听JS响应式状态（如Vue的ref）并手动写入、MutationObserver监听style属性变更或requestAnimationFrame轮询实现；根本原因在于CSS变量无原生事件机制。
CSS 变量本身无法被 JS 直接监听变化，因为它们不是 JavaScript 对象属性，也没有 getter/setter 机制——你只能主动读取，不能被动响应。 所有“监听 CSS 变量变化”的需求，本质都要转为监听某个 JS 响应式状态（如 ref、useState、Observable），再在变化时手动写入变量。下面分场景说明怎么做、为什么这么设计、以及最容易翻车的地方。
用 watchEffect（Vue 3）监听主题 ref 并同步更新 CSS 变量
这是最常见也最推荐的组合：用 Vue 的响应式系统做源头，watchEffect 自动追踪，再调用 document.documentElement.style.setProperty 写入。
- 不要写
watchEffect(() => getComputedStyle(root).getPropertyValue('--theme-color'))—— 这是在“读”变量，不会触发重新执行，等于白写 - 必须监听一个真正响应式的源，比如
const theme = ref('dark')，然后在回调里root.style.setProperty('--theme-color', theme.value === 'dark' ? '#1e1e1e' : '#fff') - 如果主题配置较复杂（含明暗+色系+字号），建议把整个对象设为
ref，并用watchEffect读取其深层字段，避免手动展开每个 key - 服务端渲染（如 Nuxt）中要加
if (typeof document !== 'undefined')判断，否则会报document is not defined
用 MutationObserver 监听 :root 的 style 属性变更
虽然不推荐，但技术上可行：当 JS 主动调用 setProperty 时，会修改 document.documentElement.style.cssText，这属于 DOM 属性变更，可被 MutationObserver 捕获。
- 只监听
attributes且目标是document.documentElement，配置项为{ attributes: true, attributeFilter: ['style'] } - 回调中需用
getComputedStyle(root).getPropertyValue('--my-var')重新读值，因为 MutationRecord 不包含新旧值对比 - 性能差：每次
setProperty都触发，且无法区分是哪个变量变的；如果多个组件同时写变量，会重复触发 - 纯 CSS 修改（如通过 class 切换间接改变量）不会触发此 observer，它只响应 JS 对
style属性的直接操作
用 requestAnimationFrame 轮询读取 + 差值比对
极端情况下（比如你完全无法控制变量源头，只能观察第三方库输出的 CSS 变量），可用轮询模拟“监听”。
立即学习“前端免费学习笔记（深入）”；
- 缓存上一次读到的值，每帧用
getComputedStyle(root).getPropertyValue('--x')读新值，字符串比对是否变化 - 别用
setInterval，优先用requestAnimationFrame保证与渲染节奏一致，避免丢帧或卡顿 - 注意字符串格式一致性：CSS 引擎可能返回
'16px'或'16 px'，建议统一.trim()后比对 - 移动端要小心：部分 WebView 在后台标签页中会降频甚至暂停 rAF，导致监听失效
真正容易被忽略的是：CSS 变量没有变更事件，也没有“监听接口”，所有看似“监听”的方案，都是在监听 JS 状态或 DOM 属性变更。如果你发现变量变了但 UI 没更新，大概率是 CSS 中漏写了 var(--x, fallback) 的回退值，或者变量名拼错、作用域没覆盖到目标元素——先检查这些，比折腾监听逻辑更有效。
