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)文章
這篇文章主要介紹了使用vue開發(fā)移動端管理后臺的注意事項,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
在vue項目中集成graphql(vue-ApolloClient)
這篇文章主要介紹了在vue項目中集成graphql(vue-ApolloClient)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了淺談Vuex狀態(tài)管理(全家桶)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue使用Google Recaptcha驗證的實現(xiàn)示例
我們最近的項目中需要使用谷歌機器人驗證，所以就動手實現(xiàn)一下，本文就來詳細的介紹一下vue Google Recaptcha驗證，感興趣的可以了解一下2021-08-08
這篇文章主要介紹了Vue自定義指令，文章從背景開始詳細介紹Vue自定義指令的詳細內(nèi)容，隨著Vue自定義指令的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考一下2021-11-11
彈窗是我們開發(fā)中經(jīng)常遇到的一個功能,下面這篇文章主要給大家介紹了關(guān)于vue如何通過點擊事件彈出彈窗頁面的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)文字滾動效果，公告滾動播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
今天小編就為大家分享一篇vue遍歷對象中的數(shù)組取值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue路由傳參的兩種方式query和params,介紹了query和params區(qū)別與總結(jié)，結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
Vue router錯誤跳轉(zhuǎn)到首頁("/")的問題及解決
這篇文章主要介紹了Vue router錯誤跳轉(zhuǎn)到首頁("/")的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10