vue的provide/inject实现响应式数据监听

描述： provide/inject 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

• 无论多少层都会被子组建拿到
• 主要用在高阶组件
• provide 选项应该是一个对象或返回一个对象的函数。
• inject 选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名

提示： provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 - 官方提示

正常使用

父组件：

var Provider = {
  provide: {
    name: 'zs'
  }
}

子组件：

var Child = {
  inject: ['name'],
  created () {
    console.log(this.name) // => "zs"
  }
}

按照上边的例子，发现如果修改了Provider的name值，Child的name并没有随着更改。官网也说了provide并不是响应的。为了解决这个问题 需要把name变成vue的监听的对象，换句话说就是需要把name变成对象

响应式数据监听处理

例如：监听窗口的改变，将改变的值传递给其他需要的子组件，window.resize只能监听一次。
父组件：

data () {
    return {
        screenObj: { // 当前屏幕的宽度，用于响应式处理
            screenWidth: document.body.clientWidth
        }
    }
},
provide () { // 将datas属性提供给子孙组件
   return {
       clientWidth: this.screenObj
   }
},
mounted () {
   window.onresize = () => {
       // 监听窗口变化并将数据响应到子孙组件
       this.screenObj.screenWidth = document.body.clientWidth;
   }
   this.$once('hook:beforeDestroy', () => {
       window.removeEventListener("resize", () => {});
   })
}

子组件：

inject: ['clientWidth'], // 接收父组件注入的内容
watch: {
    clientWidth: {
        handler (value) {
            this.dynamicCompute(value.screenWidth); // 可以监听到clientWidth的改变
        },
        immediate: true,
        deep: true
    }
},

这样就可以进行响应式处理了，provide提供的对象数据改变之后，子孙组件都可以监听到