vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue2,vue3使用provide/inject注入区别

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

作者:不叫猫先生

这篇文章主要介绍了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是取不到组件中的变量的。

<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包裹需要传递的参数

 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 这样真正的状态管理方案了

总结

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

您可能感兴趣的文章:
阅读全文