Question

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

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

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

在示例代码中：

// 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

对于父子组件通信，应该首选道具和事件，而不是$ parent或变异道具。

理想的Vue应用程序是关闭道具，关闭事件。但是，在某些情况下，可能会发生prop突变或this。$ parent可以简化已经深入耦合的两个组件。

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

在这种情况下，您实际上将使用inject对道具进行变异。您将需要特别注意以下事实：在标准应用程序中使用provide / inject并没有遵循规范的方法。如果要将状态映射到组件层次结构，则vuex是首选。

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

1 个答案: