如何利用 Provide 实现全局主题切换？响应式状态注入的实战技巧

全局主题切换需用 ref 包裹主题状态并 provide，配合 useTheme 封装切换逻辑；子组件 inject 时传默认值并 watch 响应变化；CSS 变量动态设置实现样式解耦。用 Provide 实现全局主题切换，核心不是“把主题塞进去”，而是让所有依赖主题的组件能自动响应变化——这需要状态可变、可监听、且注入路径清晰。主题状态必须是响应式的（ref 或 reactive）Provide 的值本身不会自动触发更新。如果传入普通对象或字符串，子组件即使用了 inject 也无法感知变化。? 正确做法：用 ref 包裹主题名，或用 computed 派生响应式值 ? 错误做法：直接 provide('theme', 'dark') —— 后续改值不会触发重渲染 示例：const theme = ref('light')<br>provide('theme', theme) // 注入 ref，子组件 inject 后可 .value 读取，也能被 watch 封装主题控制逻辑，避免分散修改不要让每个页面手动改 theme.value，应统一暴露切换方法，并在内部处理持久化、事件通知等细节。 橙篇 百度文库发布的一款综合性AI创作工具