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