vue2.x,vue3.x使用provide/inject注入的區別是什么

這篇文章主要介紹“vue2.x,vue3.x使用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是取不到組件中的變量的。

• 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 這樣真正的狀態管理方案了

到此，關于“vue2.x,vue3.x使用provide/inject注入的區別是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！