vue3響應式實現(xiàn)readonly從零開始教程
更新時間：2023年03月06日 16:22:25 作者：Yuin316
這篇文章主要為大家介紹了vue3響應式實現(xiàn)readonly從零開始教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
前言
前面的章節(jié)我們把 effect 部分大致講完了，這部分我們來講 readonly以及重構一下reactive。
readonly的實現(xiàn)
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的時候，發(fā)出一個警告
expect(console.warn).toBeCalled();
});
其實與我們之前實現(xiàn) reactive 十分的類似，區(qū)別只不過是set 的時候不要觸發(fā)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);
// 觸發(fā)依賴
trigger(target, key);
return res;
},
});
}
重構
可以看到，readonly 和 reactive 實現(xiàn)其實很類似，那我們可以重構一下，增強后續(xù)的拓展性。
至于我說的類似，指的是 new Proxy(target, handlers) 中的handlers(處理器對象)中的一些traps(捕獲器)。即get, set 這些方法。
我們可以通過工廠函數(shù)來創(chuàng)建那些traps函數(shù)，來簡化我們的代碼，提高可維護性。
另外，我們假定traps可以有工廠可以生產了，即handlers這部分相當于被定下來了，new Proxy 這部分也理應可以通過工廠函數(shù)創(chuàng)造出來。
我們先抽出一個公共的文件 baseHandler.ts
// baseHanlder.ts
import { track, trigger } from "./effect";
// get的工廠函數(shù)
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的工廠函數(shù)
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);
}
結束
本篇幅比較短小，但是算是為后續(xù)打下了一些基礎吧。因為筆者發(fā)現(xiàn)邊學邊寫總結文章速度很慢，然后寫完 effect 那幾篇之后就開始直接一路往下學，中途雖然有提交git，但是沒有打tag的習慣，搞的現(xiàn)在回來來寫文章有點無從下手。
不過最近應該快把diff那部分搞定了，到時候應該會加快速度更新，更多關于vue3響應式readonly的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了如何在Vue3中使用aceEditor插件和vue-ipynb插件實現(xiàn)不同類型的文件預覽,包括txt、md、json、pkl、mps、py、ipynb、doc、docx、pdf、xlsx、csv等文件,需要的朋友可以參考下2025-03-03
本文主要介紹了Vue組件文檔生成工具庫的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue3中Vant的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue3響應式對象是如何實現(xiàn)的，文章圍繞主題展開詳細的內容介紹具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
使用Vue3-Ace-Editor如何在Vue3項目中集成代碼編輯器
這篇文章主要介紹了使用Vue3-Ace-Editor如何在Vue3項目中集成代碼編輯器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
本篇文章主要介紹了Vue+Video.js播放m3u8視頻流的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了Vue之創(chuàng)建項目及目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue-cli3.0 特性解讀,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
基于Vue-Cli 打包自動生成/抽離相關配置文件的實現(xiàn)方法
基于Vue-cli 項目產品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，極大的降低了效率。這篇文章主要介紹了基于Vue-Cli 打包自動生成/抽離相關配置文件 ,需要的朋友可以參考下2018-12-12
在vue項目中假使我們在同一個路由下,只是改變路由后面的參數(shù)值,期望達到數(shù)據(jù)的更新,這篇文章主要給大家介紹了關于vue3監(jiān)聽路由的變化的相關資料,需要的朋友可以參考下2023-09-09