VueJS設(shè)計與實現(xiàn)之淺響應(yīng)與深響應(yīng)詳解
正文
前文中講完了如何響應(yīng)Object，并處理了一些響應(yīng)中的問題，但是我們目前，包括之前實現(xiàn)的響應(yīng)式，其實只是淺響應(yīng)。
直接上代碼
const obj = {a:{b:1}}
const reactive = (obj)=> new Proxy(obj,{
get(target,key,receiver){
/*省略其他邏輯*/
return Reflect.get(target,key,receiver)
},
/*省略其他攔截*/
})
const data = reactive(obj)
問題就出現(xiàn)在Reflect.get(target, key, receiver)這句代碼里，我們現(xiàn)在嘗試一下獲取data.a，應(yīng)該返回的是{b:1}，不是Proxy,自然不會響應(yīng)什么。
所以對于這種嵌套對象，我們自然要去遞歸的把對象轉(zhuǎn)換為響應(yīng)式對象。
const reactive = (obj)=> new Proxy(obj,{
get(target,key,receiver){
/*省略其他邏輯*/
const res = Reflect.get(target,key,receiver)
if(res && typeof res === 'object'){
return reactive(res)
}
return res
}，
/*省略其他攔截*/
})
這樣，當(dāng)內(nèi)部是嵌套對象的時候，我們遞歸把嵌套對象轉(zhuǎn)換為響應(yīng)式對象，這樣再按之前的追蹤依賴，觸發(fā)響應(yīng)去處理就好了。
當(dāng)時，深響應(yīng)和淺響應(yīng)都是有各自的使用條件的。比如我在完成第一個vue3.2項目有感中寫過，我就比較喜歡用shallowRef，這就是一種淺響應(yīng)。
好了，話題收回來。我們之前封裝的那個reactive已經(jīng)變成一個深響應(yīng)了，我們現(xiàn)在就在封裝一層，去區(qū)分淺響應(yīng)和深響應(yīng)。我們通過一個新的參數(shù)deepify去判斷淺響應(yīng)和深響應(yīng)，然后深響應(yīng)的時候才去遞歸。
之所以再封裝了一層，是因為我們后續(xù)還要繼續(xù)擴展這個函數(shù)
const createReactive = (obj,deepify = true)=>new Proxy(obj,{
get(target,key,receiver){
/*省略其他邏輯*/
const res = Reflect.get(target,key,receiver)
//深響應(yīng)式遞歸
if(deepify && res && typeof res === 'object'){
return reactive(res)
}
return res
}，
/*省略其他攔截*/
})
這樣子封裝之后，我們就有了2個函數(shù)reactive,shallowReactive
const reactive = (obj)=>createReactive(obj) const shallowReactive = (obj)=>createReactive(obj,false)
大家使用的時候，其實需要看情況去選擇，淺響應(yīng)其實有時候比深響應(yīng)更方便。就比如我之前在那篇文章中舉得例子一樣。
以上就是VueJS設(shè)計與實現(xiàn)之淺響應(yīng)與深響應(yīng)詳解的詳細(xì)內(nèi)容，更多關(guān)于VueJS淺響應(yīng)深響應(yīng)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實現(xiàn)點擊按鈕互斥效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
下面小編就為大家分享一篇vue獲取當(dāng)前激活路由的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue使用once修飾符,使事件只能觸發(fā)一次問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue實現(xiàn)類似Spring官網(wǎng)圖片滑動效果方法
這篇文章主要介紹了Vue實現(xiàn)類似Spring官網(wǎng)圖片滑動效果方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue進(jìn)行下載與處理二進(jìn)制流文件的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue如何實現(xiàn)將后端返回的二進(jìn)制流進(jìn)行處理并實現(xiàn)下載,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
webpack vue項目開發(fā)環(huán)境局域網(wǎng)訪問方法
下面小編就為大家分享一篇webpack vue項目開發(fā)環(huán)境局域網(wǎng)訪問方法，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)分享一下vue3中動態(tài)組件遇到的問題,分別是動態(tài)組件綁定問題和動態(tài)組件的方法導(dǎo)出問題,有需要的小伙伴可以參考一下2024-12-12
使用vue引入maptalks地圖及聚合效果的實現(xiàn)
這篇文章主要介紹了使用vue引入maptalks地圖及聚合效果的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了elementPlus修改主題色以及皮膚設(shè)置思路，具有很好的參考價值，希望對大家有所幫助。2023-04-04
這篇文章主要介紹了一篇文章帶你徹底搞懂VUE響應(yīng)式原理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可任意參考一下,需要的朋友可以參考下2022-06-06