vue 2 中 inject 数据本身非响应式，需确保 provide 返回响应式源（如 this.xxx），基础类型可直接 watch，对象/数组须 deep: true 或监听具体字段，不可控值可转为 data/computed 再监听。
Inject 注入的数据本身在 Vue 2 中**不是响应式代理**，不能直接被 watch 捕获变化——除非它原本就来自祖先组件的响应式数据源（比如 data 或 computed 返回的对象）。所以监听的关键不在于“怎么写 watch”，而在于“注入的数据是否可响应”以及“如何正确监听它的变化”。
确保注入的是响应式数据源
Provide 必须返回组件实例上的响应式属性，而非静态拷贝或字面量：
- ✅ 正确：提供
this.userInfo（userInfo是data中定义的响应式对象） - ❌ 错误：提供
{ name: this.name }（创建了新对象，脱离响应式系统） - ⚠️ 注意：
provide()必须写成函数形式，否则this指向异常，无法访问响应式数据
监听基本类型值（字符串、数字、布尔）
如果注入的是基础类型（如 count、theme），且它源自 data 的响应式字段，可直接监听：
inject: ['count'],
watch: {
count(newVal, oldVal) {
console.log('计数更新为：', newVal)
}
}
监听对象或数组（需深度监听）
注入的是响应式对象（如 user、treeDataObj）时，必须启用 deep: true 才能捕获内部属性变化：
- 用法一：监听整个对象（适合结构简单、变更频繁的场景）
inject: ['user'],
watch: {
user: {
handler(newVal, oldVal) {
this.displayName = newVal.name
},
deep: true,
immediate: true
}
}
- 用法二：监听具体嵌套字段（性能更优，推荐）
watch: {
'user.age'(newVal) {
console.log('年龄变了：', newVal)
},
'user.profile.avatar'(newVal) {
this.avatarUrl = newVal
}
}
Vue 2 中的兼容性补救方案
若注入值不可控（例如来自非响应式计算、第三方库或初始化后才赋值），可在子组件中手动转为响应式：
- 将注入值存入
data，再监听该本地响应式字段 - 或使用
computed包裹注入值，再监听 computed 属性
inject: ['config'],
data() {
return {
localConfig: this.config // 立即赋值，触发响应式追踪
}
},
watch: {
localConfig: {
handler(newVal) { /* 处理变化 */ },
deep: true,
immediate: true
}
}
跨层级联动不是靠“强行监听 inject”，而是靠“源头响应式 + 正确监听路径 + 合理粒度控制”。只要祖先组件改的是响应式数据，子组件就能收到变化；watch 只是把变化转化为行为，不是魔法开关。
