provide('theme', reactive({ color }));
const theme = inject('theme');

顶层切换主题色,深层组件颜色一直不变,控制台没有报错,DevTools 里 inject 到的还是旧对象,父级已经换成新的了。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。

追下去是这么回事:provide 传的是解构后的普通值或新对象,父级重新赋值后注入方手里那份引用没变,响应式链断在这里,改再多层也传不下去,改完记得刷新。

围绕「provide inject 响应式」排查时,命令行跑一遍比在面板里点十次有用,面板会替你做掉不少隐式操作。同一份配置存在多处的,先确认改的是被加载的那一份。

新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。

处理上按这个顺序:provide 直接传 reactive 对象本身,别解构也别重新包一层;对外只暴露 readonly,防止深层组件随手乱改,改坏了难查;需要更新时同时提供一个统一的修改方法,别只给值。

确认没问题再收工,顶层切换主题后深层组件立即变色,所有注入点同步,不用刷新页面。

作者 9823189