vue2.x,vue3.x使用provide/inject注入的区别说明

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

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端

vue的依赖注入问题

当一个module拥有超过两层的组件时，从后代组件一层层emit出去调用祖先组件的方法或一层层将祖先的数据用props传递到后代组件实在是太麻烦，当需要修改时也需要一层层去找需要修改的地方

vue.js提供了一个“依赖注入”的方式，在这个方式中用到了两个新的实例选项：provide和inject

provide选项允许我们指定我们想要提供给后代组件的数据/方法。

祖先组件：

...
data() {
 return {
  msg: ‘I am origin component data'
 }
},
provide: function() {
 return {
  getData() {
   console.log(‘hi，I come from origin component')
  }
 },
 msg: this.msg
},
...

inject可以在任何后代组件使用来接受我们在祖先指定的数据/方法

后代组件：

...
inject: [‘getData', ‘msg'],
created() {
 this.init()
},
methods: {
 init() {
  console.log(this.msg),
  this.getData()
 }
}
...

然而，依赖注入还是有负面影响的。它将你应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。

同时所提供的 property 是非响应式的。这是出于设计的考虑，因为使用它们来创建一个中心化规模化的数据跟使用 $root做这件事都是不够好的。

如果你想要共享的这个 property 是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像 Vuex 这样真正的状态管理方案了

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论