實(shí)現(xiàn)shallowReadonly和isProxy功能示例詳解
一、實(shí)現(xiàn)shallowReadonly
(一)單元測(cè)試
// 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
,淺層只讀,從單測(cè)也很容易看出來(lái)。一般的應(yīng)用場(chǎ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í)可見(jiàn)shallowReadonly的set邏輯同readonly,所以從readonly那繼承過(guò)來(lái),然后改寫get邏輯即可 export const shallowReadonlyHandlers = extend({}, readonlyHandlers, { get: shallowReadonlyGet });
最基本的邏輯,這就完成了,單測(cè)一下。
(三)額外的單測(cè)
當(dāng)然為了嚴(yán)謹(jǐn)一些,我們還是測(cè)試一下,淺層和深層的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)對(duì)isProxy
的描述。
Checks if an object is a proxy created by reactive or readonly
(一)單元測(cè)試
我們只需要在之前的用例中補(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)起來(lái),我們只要復(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功能的資料請(qǐng)關(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問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue中代碼編輯器與實(shí)時(shí)預(yù)覽功能
CodeMirror提供了強(qiáng)大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡(jiǎn)單,當(dāng)用戶編輯代碼時(shí),實(shí)時(shí)預(yù)覽會(huì)根據(jù)代碼的變化進(jìn)行更新,從而為用戶提供了一個(gè)交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進(jìn)行代碼編輯器與實(shí)時(shí)預(yù)覽,需要的朋友可以參考下2023-10-10vue.js實(shí)現(xiàn)h5機(jī)器人聊天(測(cè)試版)
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)h5機(jī)器人聊天測(cè)試版,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07打通前后端構(gòu)建一個(gè)Vue+Express的開(kāi)發(fā)環(huán)境
這篇文章主要介紹了打通前后端構(gòu)建一個(gè)Vue+Express的開(kāi)發(fā)環(huán)境,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07vue.js表格組件開(kāi)發(fā)的實(shí)例詳解
Vue.js通過(guò)簡(jiǎn)潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中,Vue.js有幸受到一定程度的關(guān)注,所以本文將從各方面對(duì)Vue.js的組件開(kāi)發(fā)做一個(gè)深入介紹。有需要的朋友們可以參考借鑒。2016-10-10vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08