vue2.x,vue3.x使用provide/inject注入區(qū)別

provide/inject介紹

provide/inject通信方式屬于爺孫通信，vue2.x與vue3.x區(qū)別還是很大，無論層級多深，發(fā)起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()生命周期里運行，不能放在別的周期里運行，也不能放在事件周期里運行（也就是不能放在異步函數中，當執(zhí)行到inject時，此時已經不在setup生命周期中）。

另外在setup中不能使用this，因為setup實在data、computed、methods之前執(zhí)行的，所以this是取不到組件中的變量的。

• setTimeout、promise.then()、鼠標事件的回掉等都不可在函數里面執(zhí)行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 出去給子孫組件用，這樣子孫組件每次拿到的數據才會是新的。但由于不具備響應性，所以子孫組件每次都需要重新通過執(zhí)行 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 是非響應式的。這是出于設計的考慮，因為使用它們來創(chuàng)建一個中心化規(guī)模化的數據跟使用 $root做這件事都是不夠好的。

如果你想要共享的這個 property 是你的應用特有的，而不是通用化的，或者如果你想在祖先組件中更新所提供的數據，那么這意味著你可能需要換用一個像 Vuex 這樣真正的狀態(tài)管理方案了

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論