vue3簡易實現(xiàn)proxy代理實例詳解
vue3 簡易實現(xiàn)proxy代理
1.基礎(chǔ)數(shù)據(jù)
const state = reactive({ name: 'cld', age: 26, like: 'paint' }); console.log("獲取更改age前的值", state.age); state.age = 28; console.log("獲取更改age后的值", state.age);
核心邏輯 reactive
export function reactive (target) { // 創(chuàng)建一個響應(yīng)式對象 對象 set map array object ... return createReactiveObject(target, { // proxy + reflect get (target, key, receiver) { // 可能無法訪問key target[key]是否成功不會報錯 所以使用reflect const res = Reflect.get(target, key, receiver); // == target[key]; console.log('用戶取值', target, key); return res; }, set (target, key, value, receiver) { const res = Reflect.set(target, key, value, receiver); console.log('用戶設(shè)置值', target, key);// == target[key]=value; return res; } }); } const isObject = (obj) => { return typeof obj == 'object' && obj != null; }; function createReactiveObject (target, baseHandler) { // 如果不是對象 不需要代理 if (!isObject(target)) { return target; } // target目標對象 baseHandler get/set 值處理方法, const observed = new Proxy(target, baseHandler); return observed; }
/** Reflect 作用 * 可能無法訪問key target[key]是否成功不會報錯 * 所以使用reflect * Reflect.get 返回值 Reflect.set 返回值boolean **/ const res = Reflect.get(target, key, receiver); // Reflect.get(target, key, receiver); 等價于 target[key] 并返回值 const res = Reflect.set(target, key, value, receiver); // res 值為true/false 表示是否成功設(shè)置值
代理實現(xiàn)效果
vue3取值的時候才走代理操作,不取值的時候,不需要深度遍歷代理,
vue2一開始就深度遞歸
當數(shù)據(jù)里為數(shù)組或?qū)ο蟮那闆r下,需要遞歸代理
get (target, key, receiver) {// proxy+reflect const res = Reflect.get(target, key, receiver);// == target[key]; if (isObject(res)) { return reactive(res); } return res; };
修改值的時候,具體是新增操作還是修改操作 可以定位
set (target, key, value, receiver) { const hasKey = hasOwn(target, key); const oldValue = target[key]; // Reflect.set 操作前還是歷史數(shù)據(jù) const res = Reflect.set(target, key, value, receiver); if (!hasKey) { // 新增屬性 console.log('用戶新增值', target, key); } else if (value !== oldValue) { //修改操作 console.log('用戶修改值', target, key); } return res; };
push數(shù)據(jù)的時候,會先取arr的push屬性,然后取array的length屬性
設(shè)置值的時候 key是index索引,在該索引上增加值
其實在該索引上增加值之后,還會再次觸發(fā)set 應(yīng)該數(shù)組的長度改變了
為了減少多余的無必要的操作,可以通過判斷不執(zhí)行任何操作
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Template?ref在Vue3中的實現(xiàn)原理詳解
這篇文章主要為大家介紹了Template?ref在Vue3中的實現(xiàn)原理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07