vue2.x，vue3.x使用provide/inject注入区别

时间：2023-02-27 11:24:32


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端
标签：

相关文章