VueJS設(shè)計(jì)與實(shí)現(xiàn)之淺響應(yīng)與深響應(yīng)詳解
正文
前文中講完了如何響應(yīng)Object，并處理了一些響應(yīng)中的問(wèn)題，但是我們目前，包括之前實(shí)現(xiàn)的響應(yīng)式，其實(shí)只是淺響應(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)
問(wèn)題就出現(xiàn)在Reflect.get(target, key, receiver)這句代碼里，我們現(xiàn)在嘗試一下獲取data.a，應(yīng)該返回的是{b:1}，不是Proxy,自然不會(huì)響應(yīng)什么。
所以對(duì)于這種嵌套對(duì)象，我們自然要去遞歸的把對(duì)象轉(zhuǎn)換為響應(yīng)式對(duì)象。
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)部是嵌套對(duì)象的時(shí)候，我們遞歸把嵌套對(duì)象轉(zhuǎn)換為響應(yīng)式對(duì)象，這樣再按之前的追蹤依賴(lài)，觸發(fā)響應(yīng)去處理就好了。
當(dāng)時(shí)，深響應(yīng)和淺響應(yīng)都是有各自的使用條件的。比如我在完成第一個(gè)vue3.2項(xiàng)目有感中寫(xiě)過(guò)，我就比較喜歡用shallowRef，這就是一種淺響應(yīng)。
好了，話題收回來(lái)。我們之前封裝的那個(gè)reactive已經(jīng)變成一個(gè)深響應(yīng)了，我們現(xiàn)在就在封裝一層，去區(qū)分淺響應(yīng)和深響應(yīng)。我們通過(guò)一個(gè)新的參數(shù)deepify去判斷淺響應(yīng)和深響應(yīng)，然后深響應(yīng)的時(shí)候才去遞歸。
之所以再封裝了一層，是因?yàn)槲覀兒罄m(xù)還要繼續(xù)擴(kuò)展這個(gè)函數(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個(gè)函數(shù)reactive,shallowReactive
const reactive = (obj)=>createReactive(obj) const shallowReactive = (obj)=>createReactive(obj,false)
大家使用的時(shí)候，其實(shí)需要看情況去選擇，淺響應(yīng)其實(shí)有時(shí)候比深響應(yīng)更方便。就比如我之前在那篇文章中舉得例子一樣。
以上就是VueJS設(shè)計(jì)與實(shí)現(xiàn)之淺響應(yīng)與深響應(yīng)詳解的詳細(xì)內(nèi)容，更多關(guān)于VueJS淺響應(yīng)深響應(yīng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
基于element-ui封裝可搜索的懶加載tree組件的實(shí)現(xiàn)
這篇文章主要介紹了基于element-ui封裝可搜索的懶加載tree組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
provide/inject 是 Vue.js 中用于跨組件傳遞數(shù)據(jù)的一種高級(jí)技術(shù)，它可以將數(shù)據(jù)注入到一個(gè)組件中，然后讓它的所有子孫組件都可以訪問(wèn)到這個(gè)數(shù)據(jù)，這篇文章主要介紹了VUE中常用的4種高級(jí)方法,需要的朋友可以參考下2023-05-05
本文主要介紹了Vue如何設(shè)置el-table背景透明樣式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了vue router 源碼概覽的案例分析，本文通過(guò)實(shí)例代碼案例分析給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
vue2.0/3.0中provide和inject的用法示例
provide和inject是成對(duì)出現(xiàn)的,主要用于父組件向子孫組件傳遞數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue2.0/3.0中provide和inject用法的相關(guān)資料,需要的朋友可以參考下2021-09-09
默認(rèn)瀏覽器設(shè)置及vue自動(dòng)打開(kāi)頁(yè)面的方法
今天小編就為大家分享一篇默認(rèn)瀏覽器設(shè)置及vue自動(dòng)打開(kāi)頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
詳解如何在Vue項(xiàng)目中導(dǎo)出Excel
這篇文章主要介紹了如何在Vue項(xiàng)目中導(dǎo)出Excel，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue2.x-使用防抖以及節(jié)流的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這次給大家?guī)?lái)vue-cli3.0配置詳解，使用vue-cli3.0配置的注意事項(xiàng)有哪些？本文通過(guò)實(shí)戰(zhàn)案例給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-09-09
vue開(kāi)發(fā)移動(dòng)端底部導(dǎo)航條功能
這篇文章主要介紹了vue開(kāi)發(fā)移動(dòng)端底部導(dǎo)航條功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04