reactive readonly嵌套對象轉(zhuǎn)換功能實現(xiàn)詳解
更新時間：2022年12月25日 17:28:57 作者：IamZJT_
這篇文章主要為大家介紹了reactive readonly嵌套對象轉(zhuǎn)換功能實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
一、單元測試
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);
});
二、代碼實現(xiàn)
為什么嵌套的深層對象沒有轉(zhuǎn)換成reactive、readonly呢？
因為Proxy劫持的是對象本身，并不能劫持子對象的變化。
其實通過單測可以看出，我們只需要將reactive嵌套的里層對象也轉(zhuǎn)換成reactive，將readonly嵌套的里層對象也轉(zhuǎn)換成readonly。
那只需要在get中，返回res的時候，將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;
};
}
跑一下完整的單測結(jié)果看下：
ps: 其實這里需要注意的一點就是，在get中處理嵌套轉(zhuǎn)換，我們只有在用到這個子對象的時候，才會將這個子對象 轉(zhuǎn)換成響應(yīng)時代理，避免了不必要的性能浪費。對比vue2的遞歸遍歷defineProperty來說，也是一個優(yōu)化的地方。
以上就是reactive readonly嵌套對象轉(zhuǎn)換功能實現(xiàn)詳解的詳細內(nèi)容，更多關(guān)于reactive readonly嵌套對象轉(zhuǎn)換的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
解決echarts圖表y軸數(shù)據(jù)間隔過大的問題
這篇文章主要介紹了解決echarts圖表y軸數(shù)據(jù)間隔過大的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue3下eslint配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教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實現(xiàn)圖片圈選功能,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴快來跟隨小編一起學習一下吧2023-12-12
本文主要介紹了vue-router4版本第一次打開界面不匹配路由問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)登錄時圖形驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue之Vue.use的使用場景，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
最近在開發(fā)移動端項目，通過向左滑動出現(xiàn)刪除按鈕，點擊即可刪除，怎么實現(xiàn)這個功能呢，接下來小編給大家?guī)韺嵗a幫助大家學習vue項目實現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧2021-05-05
vue3?el-table結(jié)合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動的思路詳解
這篇文章主要介紹了vue3?el-table結(jié)合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動,創(chuàng)建兩個table，隱藏第一個table的body部分，這樣就能得到一個固定的head，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue中引用阿里字體圖標出現(xiàn)錯誤問題的解決方法，感興趣的朋友跟隨腳本之家小編一起學習吧2018-02-02