Vue的Provide和Inject以及响应式的实现

Provide / Inject

通常，当我们需要从父组件向子组件传递数据时，我们使用 props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。
对于这种情况，我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

Vue官网建议，在正常情况下，这两种方式已经能满足绝大多数甚至所有的业务需求，对于应用程序代码应优先使用它们处理。然而，还有一种主要为高阶插件/组件库提供的用例办法，即provide/inject，这对选项需要一起使用。

基本使用

父组件

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide() {
    return {
      todoLength: this.todos.length
    }
  },
  template: `
    ...
  `
})

子组件

app.component('todo-list-statistics', {
  inject: ['todoLength'],
  created() {
    console.log(`Injected property: ${this.todoLength}`)
  }
})

处理响应式

这是因为默认情况下，provide/inject 绑定并不是响应式的。

provide() {
    return {
      username: computed(() => this.username)
    }
  }

缺点：

设计项目，通常追求有清晰的数据流向和合理的组件层级关系便于调试和维护，然而这对选项支持任意层级都能访问，导致数据追踪比较困难。不知道那一层级声明了provide又或是哪些层级使用了inject。造成比较大的维护成本。因此，除组件库或高阶插件外，Vue建议用Vuex解决或其他办法处理。