Vue provide/inject使用

想象一个场景，子组件依赖父组件传递的props，如果有多个这样的props，其实已经很烦了，当有多个子组件，或者孙组件也依赖于由上至下的props时，写那么多props简直是要了亲命了。

为了解决这种麻烦，产生了vuex。但是我们肯定希望组件的高可复用性，不引入vuex就能实现功能，那就要考虑vue本身是否支持这种能力了。熟悉React开发的人应该会想到Context这个高阶组件，它通过Provider和Consumer，可以使得无限嵌套的父子组件共有一个数据源。Vue也有一个类似的，连名字都很相似，就是这篇文章的主人公provide和inject。

依赖注入 ，官网有个例子，讲述了为何我们需要 provide，它是可以终结复杂数据嵌套的神器。惯例先吹一波，不然写这篇文章的意义没了，=^^= 。闲话少说，上代码。

// parent组件
<template>
  <div>
    <div>{{test}}</div>
    <button @click="changeTest">修改test的值</button>
    <son></son>
  </div>
</template>

<script>
import Son from "./Son";
export default {
  name: "parent",
  components: { Son },
  provide() {
    return {
      injectData: this.test
    };
  },
  data() {
    return {
      test: "测试",
    };
  },
  methods: {
    changeTest() {
      this.test = "测试后";
    }
  }
};
</script>

//son组件
<template>
  <div>{{injectData}}</div>
</template>


<script>
export default {
  name: "son",
  inject: ["injectData"],
  mounted() {
    // eslint-disable-next-line
    console.log(this.injectData)
  },
};
</script>

parent组件使用provide提供一个injectData，son组件通过inject获取到parent注入的数据，以上就是它的最简用法。有一点需要注意，我们可以将inject得到的数据直接赋值给子组件的data或props，但是这个是在vue版本2.1之后才有的功能，这版本之前，会在data，props得到之后再得到注入的值。

使用provide/inject我们需要注意的是：

provide/inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide 选项应该是：一个对象或返回一个对象的函数
inject 选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名

如果我们parent组件里provide是如下代码：

provide: {
    injectData: this.test
}

我们会发现this.test所得到的永远是undefined

 provide: {
      injectData:() => {
        //eslint-disable-next-line
        console.log(this)
      }
  },

我们打印出来的this永远是undefined，所以我们最好切记使用return返回一个对象，直接赋值对象仅在我们需要传递的是静态数据时再使用。

最开始的例子测试中，我们会得到，provide传递的test数据并不是响应式的，当parent改变了test的值后，son组件无法得到改变后的值，这就产生了一个问题，我们肯定是希望父子组件拿到的数据是相同的。

image.png

我们先看看官网是如何说的，哦，并不直接是可响应的，而是要我们人为使它是可响应的，之前的测试是符合的，因为我们provide的只是一个字符串，可响应的我们很快想到对象，数组这些。这样又产生一个问题，是provide传递的值就必须是个对象，还是说，传递的可以是个指针，指向的是个对象呢？实践出真知，测试一下。

provide() {
    return {
      injectData: this.test
    };
  },
  data() {
    return {
      test: {
        test: "测试"
      },
    };
  },

我们先将provide的改成上面的，结果是响应式的，我们再测试一下另外一种。

provide() {
    return {
      injectData: {
        test: this.test
      }
    };
  },
  data() {
    return {
      test: "测试"
    };
  },

测试得出结果，上面的不是响应式的。事实证明，必须是inject能拿到的数据对象响应式，我们才能得到响应式结果。

其实这样也蛮麻烦的，比如如果父组件有超多需要传递下去的数据，还有个超简洁的处理方式。

provide() {
  return {
      injectData: this
  }
}

我们可以将父组件整个传递到所需组件中去，并且组件实例本身就是响应式的，这样足以满足我们大部分组件需求。

使用时，我这边还是遇到了一种场景，不是provide的问题，但是与之有点关系。当我们将组件实例注入之后，子组件是能拿到组件的所有数据的，但是当父组件内里数据改变时，子组件是监听不到数据的变化的，页面也无法刷新，我是取了个巧，对数组进行 splice或者concat等其他会触发数组更新监听的操作，对象的话可以使用...或Object.assign。$set没什么用 ==！响应式更新机制，还是有很多不便的地方，刷新的解决方式还有待商榷，希望有更好的方法。