vue依赖注入provide/inject_vue3 provide和inject的缺陷

一、前言

provide 选项允许我们指定我们想要提供给子组件的数据/方法。在子组件种通过inject选项就可以使用provide提供的数据或方法。不论组件层次有多深，都可以调用。

唯一的缺点是：依赖注入所提供的数据是非响应式。比如说我在父组件种有个数据变量是响应式的接收用户输入的数据，然后我通过provide把这个数据变量提供给子组件使用，但是在子组件里面，这个变量不是实时变化的。要想得到最新的父组件种的数据，只能是手动的调用一次数据/方法。

二、示例

在父组件中定义了 provide，提供了一个函数供子组件调用，用于获取用户最新的输入数据。

provide: function () {
  return {
    getName: this.getName
  }
},
 
methods: {
    getName () {
      return this.inputValue
    }
  }

在子组件中通过inject，声明要使用的数据/函数，通过函数调用的方式，就获取到了父组件中的用户的最新输入数据。

inject: ['getName']

最后引用官网的一句话：

provide/inject 是解决组件之间的通信问题的利器，不受层级结构的限制。
但也不是随便去滥用，通信代表着耦合：