vue3響應式實現readonly從零開始教程
前言
前面的章節我們把 effect
部分大致講完瞭,這部分我們來講 readonly
以及重構一下reactive
。
readonly的實現
it("happy path", () => { console.warn = vi.fn(); const original = { foo: 1, }; const observed = readonly({ foo: 1, }); expect(original).not.toBe(observed); expect(observed.foo).toBe(1); // set不起作用 observed.foo = 2; expect(observed.foo).toBe(1); // 當被set的時候,發出一個警告 expect(console.warn).toBeCalled(); });
其實與我們之前實現 reactive
十分的類似,區別隻不過是set
的時候不要觸發trigger,而是警告。當然既然是不會被改變的,track
也是不必要的。
export function readonly(raw) { return new Proxy(raw, { get(target, key) { const res = Reflect.get(target, key); return res; }, set(target, key, newValue, receiver) { console.warn( `property: ${String(key)} can't be set, beacase ${target} is readonly.` ); return true; }, }); } export function reactive(raw) { return new Proxy(raw, { get(target, key) { const res = Reflect.get(target, key); // 依賴收集 track(target, key); return res; }, set(target, key, value) { const res = Reflect.set(target, key, value); // 觸發依賴 trigger(target, key); return res; }, }); }
重構
可以看到,readonly
和 reactive
實現其實很類似,那我們可以重構一下,增強後續的拓展性。
至於我說的類似,指的是 new Proxy(target, handlers)
中的handlers(處理器對象)中的一些traps(捕獲器)。即get
, set
這些方法。
我們可以通過工廠函數來創建那些traps函數,來簡化我們的代碼,提高可維護性。
另外,我們假定traps可以有工廠可以生產瞭,即handlers這部分相當於被定下來瞭,new Proxy
這部分也理應可以通過工廠函數創造出來。
我們先抽出一個公共的文件 baseHandler.ts
// baseHanlder.ts import { track, trigger } from "./effect"; // get的工廠函數 function createGetter(isReadonly = false) { return function get(target, key) { const res = Reflect.get(target, key); if (!isReadonly) { track(target, key); } return res; }; } function createSetter() { return function set(target, key, newValue, receiver) { const res = Reflect.set(target, key, newValue, receiver); trigger(target, key, type, newValue); return res; }; } export const mutableHandler = { get: createGetter(), set: createSetter(), }; export const readonlyHandler = { get: createGetter(), set(target, key, newValue, receiver) { console.warn( `property: ${String(key)} can't be set, beacase ${target} is readonly.` ); return true; };
然後是我們的reactive.ts
// reactive.ts import { mutableHandler, readonlyHandler, } from "./baseHandlers"; // proxy的工廠函數 function createReactiveObject( target, baseHandlers: ProxyHandler<any> ) { return new Proxy(target, baseHandlers); } export function reactive(target) { return createReactiveObject(target, mutableHandler); } export function readonly(target) { return createReactiveObject(target, readonlyHandler); }
結束
本篇幅比較短小,但是算是為後續打下瞭一些基礎吧。因為筆者發現邊學邊寫總結文章速度很慢,然後寫完 effect
那幾篇之後就開始直接一路往下學,中途雖然有提交git,但是沒有打tag的習慣,搞的現在回來來寫文章有點無從下手。
不過最近應該快把diff那部分搞定瞭,到時候應該會加快速度更新,更多關於vue3響應式readonly的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 源碼分析Vue3響應式核心之reactive
- Vue3 Reactive響應式原理邏輯詳解
- vue3響應式Proxy與Reflect的理解及基本使用實例詳解
- vue3.0響應式函數原理詳細
- 詳解Vue3的響應式原理解析