實現(xiàn)shallowReadonly和isProxy功能示例詳解
更新時間：2022年12月25日 17:20:04 作者：IamZJT_
這篇文章主要為大家介紹了實現(xiàn)shallowReadonly和isProxy功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
一、實現(xiàn)shallowReadonly
（一）單元測試
// src/reactivity/tests/shallowReadonly.spec.ts
import { isReadonly, shallowReadonly } from '../reactive';
describe('shallowReadonly', () => {
it('should not make non-reactive properties reactive', () => {
const props = shallowReadonly({ n: { foo: 1 } });
expect(isReadonly(props)).toBe(true);
expect(isReadonly(props.n)).toBe(false);
});
});
shallowReadonly，淺層只讀，從單測也很容易看出來。一般的應(yīng)用場景，可能就是用于項目的優(yōu)化，避免將深層全部轉(zhuǎn)為readonly。
（二）代碼實現(xiàn)
// src/reactivity/reactive.ts
import { mutableHandlers, readonlyHandlers, shallowReadonlyHandlers } from './baseHandlers';
export function shallowReadonly(target) {
return createReactiveObject(target, shallowReadonlyHandlers);
}
// src/reactivity/baseHandlers.ts
import { isObject, extend } from '../shared';
function createGetter(isReadonly = false, shallow = false) {
return function get(target, key) {
if (key === ReactiveFlags.IS_REACTIVE) {
return !isReadonly;
} else if (key === ReactiveFlags.IS_READONLY) {
return isReadonly;
}
const res = Reflect.get(target, key);
// + shallow，直接返回，深層不轉(zhuǎn)響應(yīng)式
if (shallow) {
return res;
}
if (isObject(res)) {
return isReadonly ? readonly(res) : reactive(res);
}
if (!isReadonly) {
track(target, key);
}
return res;
};
}
const shallowReadonlyGet = createGetter(true, true);
// + 其實可見shallowReadonly的set邏輯同readonly，所以從readonly那繼承過來，然后改寫get邏輯即可
export const shallowReadonlyHandlers = extend({}, readonlyHandlers, {
get: shallowReadonlyGet
});
最基本的邏輯，這就完成了，單測一下。
（三）額外的單測
當(dāng)然為了嚴(yán)謹(jǐn)一些，我們還是測試一下，淺層和深層的set操作的結(jié)果，是否是我們期望的。
it('should make root level properties readonly', () => {
console.warn = jest.fn();
const user = shallowReadonly({ age: 10 });
user.age = 11;
expect(console.warn).toBeCalled();
});
it('should NOT make nested properties readonly', () => {
console.warn = jest.fn();
const props = shallowReadonly({ n: { foo: 1 } });
props.n.foo = 2;
expect(props.n.foo).toBe(2);
expect(console.warn).not.toBeCalled();
});
二、實現(xiàn)isProxy
這里貼上官網(wǎng)對isProxy的描述。
Checks if an object is a proxy created by reactive or readonly
（一）單元測試
我們只需要在之前的用例中補充斷言即可。
// src/reactivity/tests/reactive.spec.ts
import { reactive, isReactive, isProxy } from '../reactive';
// reactive -> happy path
expect(isProxy(observed)).toBe(true);
// src/reactivity/tests/readonly.spec.ts
import { readonly, isReadonly, isProxy } from '../reactive';
// readonly -> happy path
expect(isProxy(wrapped)).toBe(true);
（二）代碼實現(xiàn)
其實實現(xiàn)起來，我們只要復(fù)用之前的isReactive和isProxy即可。
// src/reactivity/reactive.ts
export function isProxy(value) {
return isReactive(value) || isReadonly(value);
}
以上就是實現(xiàn)shallowReadonly和isProxy功能示例詳解的詳細(xì)內(nèi)容，更多關(guān)于shallowReadonly isProxy功能的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了在vue3中使用jsx語法,下面主要通過對比jsx和template不同語法，來實現(xiàn)同樣的功能，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue項目部署到Apache中遇到的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中多個有順序要求的異步操作處理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue-cli3 karma單元測試的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了教你用Cordova打包Vue項目的方法，詳細(xì)的介紹了如何Vue項目打包成app，具有一定的參考價值，有興趣的可以了解一下2017-10-10
這篇文章主要給大家介紹了關(guān)于Vue圖片裁剪組件的相關(guān)資料,本文介紹的組件是基于vue-cropper二次封裝,vue-cropper大家應(yīng)該都很熟悉了吧,需要的朋友可以參考下2021-07-07
使用electron-builder將項目打包成桌面程序的詳細(xì)教程
這篇文章主要介紹了使用electron-builder把web端的項目打包生成桌面程序,并可安裝程序,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了記錄vue做微信自定義分享的一些問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了vue路由嵌套的SPA實現(xiàn)步驟，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
在項目中經(jīng)常會復(fù)用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時將它們設(shè)為全局的就顯得很重要了,下面這篇文章主要給大家介紹了關(guān)于vue如何定義全局變量和全局方法的相關(guān)資料,需要的朋友可以參考下2023-04-04