vue3 简易实现proxy代理

vue3 简易实现proxy代理

简易实现了一下vue3 的 proxy代理方式,很多边缘特殊情况暂没有考虑,只梳理了一下核心逻辑。
如果感兴趣可以继续看下一篇vue3 简易实现 effect
1.基础数据

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) {
  // 创建一个响应式对象 对象 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('用户设置值', 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 表示是否成功设置值

get方法的参数一共有三个:target是实例化Proxy时使用的对象,在这个例子中是obj;而property是这次读取操作中想要获取的属性名,在这个例子中是key;最后一个参数receiver则是这个实例化的Proxy自身,即proxy。
在这里插入图片描述

代理实现效果
运行结果

vue3取值的时候才走代理操作,不取值的时候,不需要深度遍历代理,
vue2一开始就深度递归

取值的时候当数据里为数组或对象的情况下,需要递归代理

get (target, key, receiver) {// proxy+reflect
    const res = Reflect.get(target, key, receiver);// == target[key];
    if (isObject(res)) {
      console.log('get时: 如果是对象 继续代理',res)
      return reactive(res);
    }
    return res;
  };

修改值

//只执行console.log(state.name) 的时候 只打印出cld
console.log(state.name)
// 如果执行这一句,也不会走递归代理
state.obj='attrTest';

在这里插入图片描述
修改对象中的值

console.log(state.name)
// 执行下一句的时候 先去 get拦截中获取到obj还是对象,继续递归的拦截 然后取值
state.obj.attr1='attrTest';

在这里插入图片描述

修改值的时候,具体是新增操作还是修改操作 可以定位

set (target, key, value, receiver) {
    const hasKey = hasOwn(target, key);
    const oldValue = target[key]; // Reflect.set 操作前还是历史数据
    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数据的时候,会先取arr的push属性,然后取array的length属性
在这里插入图片描述
设置值的时候 key是index索引,在该索引上增加值
在这里插入图片描述
其实在该索引上增加值之后,还会再次触发set 应该数组的长度改变了
为了减少多余的无必要的操作,可以通过判断不执行任何操作
w_50,text_Q1NETiBARW1icmFjZTkyNA==,size_20,color_FFFFFF,t_70,g_se,x_16)

vue3 reactive代理源码github

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 3中引入了Proxy作为响应式系统的核心,它可以用于代理对象并拦截其属性的访问。通过使用Proxy,我们可以更加灵活地对数据进行监听和响应。 在Vue 3中,使用Proxy代理的步骤如下: 1. 创建一个普通的JavaScript对象作为数据源。 2. 使用`new Proxy(target, handler)`创建一个代理对象,其中`target`是要代理的对象,`handler`是一个包含拦截器方法的对象。 3. 在`handler`对象中定义拦截器方法,例如`get`、`set`、`deleteProperty`等。这些方法会在对代理对象进行相应操作时被调用。 4. 将代理对象作为Vue实例的数据源。 下面是一个简单的示例代码,演示了如何使用Proxy代理对象: ```javascript // 创建一个普通的JavaScript对象作为数据源 const data = { name: 'John', age: 25 }; // 使用Proxy创建代理对象 const proxy = new Proxy(data, { get(target, key) { console.log(`访问了属性 ${key}`); return target[key]; }, set(target, key, value) { console.log(`设置了属性 ${key} 的值为 ${value}`); target[key] = value; } }); // 将代理对象作为Vue实例的数据源 const app = Vue.createApp({ data() { return { person: proxy }; } }); // 在Vue模板中使用代理对象的属性 app.mount('#app'); ``` 在上述示例中,我们创建了一个普通的JavaScript对象`data`作为数据源,并使用Proxy创建了代理对象`proxy`。在代理对象的`get`和`set`方法中,我们分别打印了访问和设置属性的信息,并对原始对象进行了相应的操作。最后,将代理对象作为Vue实例的数据源,并在Vue模板中使用了代理对象的属性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Embrace924

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值