vue2 provide 响应式并watch监听

Vue 2.x 中的 `provide` 和 `inject` 是依赖注入（Dependency Injection）的概念，主要用于组件之间共享数据和服务。当你在应用中有一个全局状态需要在多个组件间共享时，可以使用 `provide` 提供这个值，然后在需要使用的地方通过 `inject` 来获取。

`provide(key, value)` 是在父组件（通常是一个应用实例或自定义的模块）上设置一个响应式的属性，key 是提供者的键，value 是提供的值。当你改变这个值，所有通过 `inject` 获取到的组件都会接收到变化的通知，因为它们订阅了该属性的变化。

`watch` 是 Vue 的响应式系统的一部分，它允许你在属性发生变化时执行某些回调函数。然而，直接在 `provide` 使用 `watch` 直接监听响应性并不常见，因为 `provide` 关注的是组件之间的通信，而不是内部的状态更新。

如果你想在组件内部监听值的变化并作出相应操作，可以在组件的生命周期钩子（如 `created`、`mounted` 或者计算属性的 getter 中）使用 `watch`。例如：

// 父组件
export default {
  data() {
    return { sharedData: 'initial value' };
  },
  provide() {
    return { sharedData };
  }
}

// 子组件
export default {
  inject: ['sharedData'],
  watch: {
    $parentSharedData(newVal) {
      console.log('共享数据已更新:', newVal);
    }
  },
  created() {
    this.$watch('$parent.sharedData', this.handleParentChange); // 更传统的写法
  },
  methods: {
    handleParentChange() {
      // 在这里处理新的 sharedData 值
    }
  }
}