为什么 Vue 的提供和注入功能会出现警告？

Question

我正在考虑在项目中使用 Vue 的新提供/注入功能，但是在官方 Vue documentation 中它给出了以下警告：

provide 和 inject 主要用于高级插件/组件库用例。不建议在通用应用程序代码中使用它们。

但是，文档没有给出原因。在“通用应用程序代码”而不是“高级插件/组件库用例”中使用提供和注入有什么危险？

在示例代码中：

// parent component providing 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// child component injecting 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

据我了解的好处是，如果您有多个嵌套的子组件，您可以跳过将道具向下传递给每个嵌套的子组件，而直接在孙组件中“接收”注入的值。

如果你绕过默认的非反应行为“如果你传递一个观察到的对象”，你甚至可以使注入的值反应，但是这里的警告对我来说是有意义的，因为你有一个反应变量跨越跨嵌套组件，数据不应该以这种方式传递，因此如果使用响应式对象，跟踪更改可能会变得更加混乱。

Answer 1

根据风格指南：https://vuejs.org/v2/style-guide/#Implicit-parent-child-communication-use-with-caution

父子组件通信应该首选props和events，而不是this.$parent或mutating props。

一个理想的 Vue 应用程序是 props down，events up。但是，在某些极端情况下，prop 变异或 this.$parent 可以简化已经深度耦合的两个组件。

问题是，在许多简单的情况下，这些模式可能会提供便利。当心：不要为了短期的方便（编写更少的代码）而被简单交易（能够理解你的状态流）所吸引。

在这种特殊情况下，您实际上将使用inject 来改变道具。您需要特别注意在标准应用程序中使用 provide / inject 不遵循规范方法这一事实。如果您想将状态映射到组件层次结构，vuex 将是首选。