vue中proxy代理,vue3.0的proxy
本文主要详细介绍Python学生成绩管理系统。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
vue3 简易实现proxy代理
1.原始数据
const state=reactive({姓名： cld ，年龄：26，喜欢： paint })；
Console.log(更改年龄前获取值，state . age)；
state.age=28
Console.log(更改年龄后获取值，state . age)；
核心逻辑反应
导出函数反应(目标){
//创建一个响应对象对象集映射数组对象.
返回createReactiveObject(目标，{
//代理反映
get(目标，密钥，接收方){
//您可能无法访问关键目标[key]。不管成功与否都不会给出错误，所以使用reflect。
const res=Reflect.get(target，key，receiver)；//==target[key]；
Console.log(用户值，目标，关键字)；
返回res
},
集合(目标、关键字、值、接收者){
const res=Reflect.set(target，key，value，receiver)；
Console.log(用户设置，目标，密钥)；//==目标[键]=值；
返回res
}
});
}
const isObject=(obj)={返回类型of obj==object obj！=null};
函数createrreactiveobject(target，baseHandler) {
//如果不是对象，就不需要代理
如果(！isObject(target)) {
返回目标；
}
//target目标对象baseHandler获取/设置值处理方法，
const observed=new Proxy(target，base handler)；
观察到的回报；
}
/**反射功能
*可能无法访问关键目标[key]。如果成功，将不会报告任何错误。
*所以用reflect。
* Reflect.get返回值Reflect.set返回值布尔值
**/
const res=Reflect.get(target，key，receiver)；
//Reflect.get(target，key，receiver)；相当于target[key]并返回值。
const res=Reflect.set(target，key，value，receiver)；
//res value为true/false以指示值是否设置成功。
代理实现效果
vue3取值时，只取代理操作。当它不取值时，它不需要深入遍历代理。
Vue2从一开始就是深度递归的
当数据是数组或对象时，需要递归代理。
get (target，key，receiver) {//代理反射
const res=Reflect.get(target，key，receiver)；//==target[key]；
if (isObject(res)) {
返回无功(RES)；
}
返回res
};
修改一个值时，可以定位它是新操作还是修改后的操作。
集合(目标、关键字、值、接收者){
const hasKey=hasOwn(target，key)；
const old value=target[key]；//Reflect.set是操作前的历史数据。
const res=Reflect.set(target，key，value，receiver)；
如果(！hasKey) {
//添加新属性
Console.log(用户添加的新值，target，key)；
} else if(值！==旧值){
//修改操作
Console.log(用户修改值，target，key)；
}
返回res
};
数据推送时，先取arr的push属性，再取array的length属性。
设置值时，key是索引，值被添加到索引中。
实际上，在给索引加值后，集合会再次被触发，数组的长度也要改变。
为了减少不必要的操作，可以判断不进行任何操作。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。