目录
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端
