reactive readonly嵌套對象轉換功能實現詳解
更新時間：2022年12月25日 17:28:57 作者：IamZJT_
這篇文章主要為大家介紹了reactive readonly嵌套對象轉換功能實現詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
一、單元測試
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);
});
二、代碼實現
為什么嵌套的深層對象沒有轉換成reactive、readonly呢？
因為Proxy劫持的是對象本身，并不能劫持子對象的變化。
其實通過單測可以看出，我們只需要將reactive嵌套的里層對象也轉換成reactive，將readonly嵌套的里層對象也轉換成readonly。
那只需要在get中，返回res的時候，將res轉換成相應的代理就可以了。
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;
};
}
跑一下完整的單測結果看下：
ps: 其實這里需要注意的一點就是，在get中處理嵌套轉換，我們只有在用到這個子對象的時候，才會將這個子對象 轉換成響應時代理，避免了不必要的性能浪費。對比vue2的遞歸遍歷defineProperty來說，也是一個優(yōu)化的地方。
以上就是reactive readonly嵌套對象轉換功能實現詳解的詳細內容，更多關于reactive readonly嵌套對象轉換的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了使用vue開發(fā)移動端管理后臺的注意事項,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
在vue項目中集成graphql(vue-ApolloClient)
這篇文章主要介紹了在vue項目中集成graphql(vue-ApolloClient)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了淺談Vuex狀態(tài)管理(全家桶)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
我們最近的項目中需要使用谷歌機器人驗證，所以就動手實現一下，本文就來詳細的介紹一下vue Google Recaptcha驗證，感興趣的可以了解一下2021-08-08
這篇文章主要介紹了Vue自定義指令，文章從背景開始詳細介紹Vue自定義指令的詳細內容，隨著Vue自定義指令的相關資料展開具體內容,需要的朋友可以參考一下2021-11-11
彈窗是我們開發(fā)中經常遇到的一個功能,下面這篇文章主要給大家介紹了關于vue如何通過點擊事件彈出彈窗頁面的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了vue實現文字滾動效果，公告滾動播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
今天小編就為大家分享一篇vue遍歷對象中的數組取值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue路由傳參的兩種方式query和params,介紹了query和params區(qū)別與總結，結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue router錯誤跳轉到首頁("/")的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10