Vue3 provide/inject

1. options Api

• 通常我们从父组件传值给子组件使用的是props，如果我们需要深层的传递如从父组件传递给孙子组件，那么再使用props去传递，这种做法可能会使你发怒。

• 遇到这种情况，就可以使用provide和inject，它可以在父级提供，在所有的子组件都可以拿到，不管嵌套得有多深。那么父组件可以使用provide选项，子组件使用inject选项。

• 使用示例

+然而，它不能传递组件实例上的属性,不能传递如this.name

• 可以转换为提供一个函数去进行替代，类似于data，目的是进行一个隔离，防止在调用的时候把提供方的数据进行了修改。

不是响应式的

• 通过provide传入的数据不是响应式的，如果修改了提供方的数据，在使用方是不会改变的，可以使用computed去计算传入的数据。

2. composition Api

• 分开定义，两个参数，一个名，一个值

• 注入的时候，可以提供一个默认值。

• 添加响应式

• 建议不要在inject中去更改数据，在provide修改。你也可以使用readonly禁止修改