快捷導(dǎo)航

vue3簡(jiǎn)易實(shí)現(xiàn)proxy代理實(shí)例詳解

更新時(shí)間：2022年03月07日 16:15:14 作者：Embrace924

這篇文章主要為大家詳細(xì)介紹了Python實(shí)現(xiàn)學(xué)生成績(jī)管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

vue3 簡(jiǎn)易實(shí)現(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)建一個(gè)響應(yīng)式對(duì)象 對(duì)象 set map array object ...
  return createReactiveObject(target, {
    // proxy + reflect
    get (target, key, receiver) {
      // 可能無(wú)法訪問(wèn)key target[key]是否成功不會(huì)報(bào)錯(cuò) 所以使用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) {
// 如果不是對(duì)象 不需要代理
  if (!isObject(target)) {
    return target;
  }
  // target目標(biāo)對(duì)象 baseHandler get/set 值處理方法，
  const observed = new Proxy(target, baseHandler);
  return observed;
}

/** Reflect 作用
 * 可能無(wú)法訪問(wèn)key target[key]是否成功不會(huì)報(bào)錯(cuò) 
 * 所以使用reflect
 * Reflect.get 返回值   Reflect.set 返回值boolean
 **/
const res = Reflect.get(target, key, receiver);  
// Reflect.get(target, key, receiver);  等價(jià)于 target[key] 并返回值
const res = Reflect.set(target, key, value, receiver);  
// res  值為true/false 表示是否成功設(shè)置值

代理實(shí)現(xiàn)效果

運(yùn)行結(jié)果

vue3取值的時(shí)候才走代理操作，不取值的時(shí)候，不需要深度遍歷代理，
vue2一開(kāi)始就深度遞歸

當(dāng)數(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;
  };

修改值的時(shí)候，具體是新增操作還是修改操作可以定位

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ù)的時(shí)候，會(huì)先取arr的push屬性，然后取array的length屬性

在這里插入圖片描述