reactive readonly嵌套對(duì)象轉(zhuǎn)換功能實(shí)現(xiàn)詳解
一、單元測(cè)試
reactive
// src/reactivity/tests/reactive.spec.ts
it('nested reactive', () => {
const original = {
nested: { foo: 1 },
array: [{ bar: 2 }]
};
const observed = reactive(original);
expect(isReactive(observed.nested)).toBe(true);
expect(isReactive(observed.array)).toBe(true);
expect(isReactive(observed.array[0])).toBe(true);
});
readonly
it('nested readonly', () => {
const original = { foo: 1, bar: { baz: 2 } };
const wrapped = readonly(original);
expect(isReadonly(wrapped)).toBe(true);
expect(isReadonly(wrapped.bar)).toBe(true);
});
二、代碼實(shí)現(xiàn)
為什么嵌套的深層對(duì)象沒有轉(zhuǎn)換成reactive、readonly呢？
因?yàn)?code>Proxy劫持的是對(duì)象本身，并不能劫持子對(duì)象的變化。
其實(shí)通過單測(cè)可以看出，我們只需要將reactive嵌套的里層對(duì)象也轉(zhuǎn)換成reactive，將readonly嵌套的里層對(duì)象也轉(zhuǎn)換成readonly。
那只需要在get中，返回res的時(shí)候，將res轉(zhuǎn)換成相應(yīng)的代理就可以了。
function createGetter(isReadonly = false) {
return function get(target, key) {
const res = Reflect.get(target, key);
if (key === ReactiveFlags.IS_REACTIVE) {
return !isReadonly;
} else if (key === ReactiveFlags.IS_READONLY) {
return isReadonly;
}
if (isObject(res)) {
return isReadonly ? readonly(res) : reactive(res);
}
if (!isReadonly) {
track(target, key);
}
return res;
};
}
跑一下完整的單測(cè)結(jié)果看下：
ps: 其實(shí)這里需要注意的一點(diǎn)就是，在get中處理嵌套轉(zhuǎn)換，我們只有在用到這個(gè)子對(duì)象的時(shí)候，才會(huì)將這個(gè)子對(duì)象 轉(zhuǎn)換成響應(yīng)時(shí)代理，避免了不必要的性能浪費(fèi)。對(duì)比vue2的遞歸遍歷defineProperty來說，也是一個(gè)優(yōu)化的地方。
以上就是reactive readonly嵌套對(duì)象轉(zhuǎn)換功能實(shí)現(xiàn)詳解的詳細(xì)內(nèi)容，更多關(guān)于reactive readonly嵌套對(duì)象轉(zhuǎn)換的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
解決echarts圖表y軸數(shù)據(jù)間隔過大的問題
這篇文章主要介紹了解決echarts圖表y軸數(shù)據(jù)間隔過大的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue3下eslint配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue2.0 element-ui中el-select選擇器無法顯示選中的內(nèi)容(解決方法)
這篇文章主要介紹了vue2.0 element-ui中的el-select選擇器無法顯示選中的內(nèi)容,在文中小編使用的是element-ui V2.2.3。具體解決方法及示例代碼大家參考下本文2018-08-08
vue3通過canvas實(shí)現(xiàn)圖片圈選功能
這篇文章將給大家詳細(xì)介紹了vue3如何通過canvas實(shí)現(xiàn)圖片圈選功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴快來跟隨小編一起學(xué)習(xí)一下吧2023-12-12
本文主要介紹了vue-router4版本第一次打開界面不匹配路由問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue實(shí)現(xiàn)登錄時(shí)圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄時(shí)圖形驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue之Vue.use的使用場(chǎng)景，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能(完整代碼)
最近在開發(fā)移動(dòng)端項(xiàng)目，通過向左滑動(dòng)出現(xiàn)刪除按鈕，點(diǎn)擊即可刪除，怎么實(shí)現(xiàn)這個(gè)功能呢，接下來小編給大家?guī)韺?shí)例代碼幫助大家學(xué)習(xí)vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧2021-05-05
vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動(dòng)的思路詳解
這篇文章主要介紹了vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動(dòng),創(chuàng)建兩個(gè)table，隱藏第一個(gè)table的body部分，這樣就能得到一個(gè)固定的head，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue中引用阿里字體圖標(biāo)出現(xiàn)錯(cuò)誤問題的解決方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02