provide/inject 介绍

provide/inject 通信方式属于爷孙通信，vue2.x 与 vue3.x 区别还是很大，无论层级多深，发起provide的组件都可以作为其所有下级组件的依赖提供者。inject 在 data/props 之前初始化，而 provide 在 data/props 之后初始化。目的是让用户可以在 data/props 中使用 inject 所注入的内容。也就是说，为了 data/props 依赖 inject，需要将初始化 inject 放在初始化 data/props 的前面。provide和inject绑定并不是可响应的，这是刻意为之，但是若传入了一个可响应的对象，那么其对象的 property 还是可响应的。**

vue2.x 用法

vue2,x 中 provide 用法和 data 类似，都是配置为一个返回对象的函数，

export default (){data:(    return {     msg:"messgae"     }  ),provide:(     return {        msg:this.msg     }  )  }

export default {  inject: [ 'msg'],  mounted () {    console.log(this.msg);  }}

vue3.x 用法

inject()只能放在 setup()生命周期里运行，不能放在别的周期里运行，也不能放在事件周期里运行（也就是不能放在异步函数中，当执行到inject时，此时已经不在setup生命周期中）。另外在 setup 中不能使用 this，因为 setup 实在 data、computed、methods 之前执行的，所以 this 是取不到组件中的变量的。

• setTimeout、promise.then()、鼠标事件的回掉等都不可在函数里面执行 inject

• provide 和 inject 并不是可响应的，但是由于引用类型的特殊性，在子孙组件拿到了数据之后，他们的属性还是可以正常的响应变化。引用类型的数据，拿到后可以直接用，属性的值更新后，子孙组件也会被更新。由于不具备真正的响应性，给模板使用依然不会更新视图。

• 基本数据类型被直接 provide 出去后，再怎么修改，都无法更新下去，子孙组件拿到的永远是第一次的那个值。

<script setup>import { provide } from "vue"provide("msg","zhangsan")</script>

<script setup>import { inject } from "vue"let msg = inject('msg')conslole.log(msg)</script>

问题：是否一定要定义成响应式数据或者引用类型数据，孙子组件才能实时接收到爷爷组件数据的最新值（不谈视图更新，只论是否可以接收到到更新）？可以定义基本数据类型，但是要将其 return 出去。如下所示：

let name = "zhangsan"provide('msg',()=>{   return 'name'})

const message = inject("msg")console.log(message()) //zhsngan

基本数据类型，需要 provide 一个函数，将其 return 出去给子孙组件用，这样子孙组件每次拿到的数据才会是新的。但由于不具备响应性，所以子孙组件每次都需要重新通过执行 inject 得到的函数才能拿到最新的数据。

禁止孙子组件修改爷爷组件值

可使用 shallowRef、readonly 包裹需要传递的参数

• shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

• readonly：接收一个 ref 或者 reactive 包装对象，返回一个只读的响应式对象。

 const user = ref('张三') provide('user', readonly(user)) // readonly是为了防止inject端修改数据影响到provide端