實(shí)現(xiàn)shallowReadonly和isProxy功能示例詳解
一、實(shí)現(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)用場景,可能就是用于項(xiàng)目的優(yōu)化,避免將深層全部轉(zhuǎn)為readonly。
(二)代碼實(shí)現(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);
// + 其實(shí)可見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();
});

二、實(shí)現(xiàn)isProxy
這里貼上官網(wǎng)對isProxy的描述。
Checks if an object is a proxy created by reactive or readonly
(一)單元測試
我們只需要在之前的用例中補(bǔ)充斷言即可。
// 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);
(二)代碼實(shí)現(xiàn)
其實(shí)實(shí)現(xiàn)起來,我們只要復(fù)用之前的isReactive和isProxy即可。
// src/reactivity/reactive.ts
export function isProxy(value) {
return isReactive(value) || isReadonly(value);
}

以上就是實(shí)現(xiàn)shallowReadonly和isProxy功能示例詳解的詳細(xì)內(nèi)容,更多關(guān)于shallowReadonly isProxy功能的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
解決vue3.0運(yùn)行項(xiàng)目warning Insert `·` prettier/pret
這篇文章主要介紹了解決vue3.0運(yùn)行項(xiàng)目warning Insert `·` prettier/prettier問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue.js實(shí)現(xiàn)h5機(jī)器人聊天(測試版)
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)h5機(jī)器人聊天測試版,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07
打通前后端構(gòu)建一個Vue+Express的開發(fā)環(huán)境
這篇文章主要介紹了打通前后端構(gòu)建一個Vue+Express的開發(fā)環(huán)境,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08

