为什么Vue3的proxy需要Reflect呢

何为proxy

Proxy 对象用于定义或修改某些操作的自定义行为,可以在外界对目标对象进行访问前,对外界的访问进行改写。

var proxy = new Proxy(target, handler)

ES6 中的proxy目前提供了13种可代理操作拦截的行为。

何为reflect

ES6 标准中,将许多原本属于 Object 对象的方法转移到了 Reflect 对象上
把所有对对象的操作转义到Reflect上。可以将 Reflect 视为一种封装了底层操作的 API。

Reflect.get(target, propertyKey[, receiver])
//同等于
target[name]Reflect.deleteProperty(target, propertyKey)
//同等于
delete target[name]

在一些旧方法执行错误时,只能通过try…catch去拿到,而reflect执行错误会返回false

try {Object.defineProperty(target, property, attributes);
} catch(e) {// 失败
}// 新写法
if (Reflect.defineProperty(target, property, attributes)) {// success
} else {// failure
}

Reflect 的作用是提供了一种统一且易于理解的方式来执行底层操作,而不是直接操作对象。这样可以保持代码的一致性和可读性,并且避免了直接操作底层方法可能引发的一些问题。

Reflect的好处

统一性:Reflect 提供了一组方法,与底层操作一一对应,使得代码更加统一和易于理解。
可读性:使用 Reflect 的方法可以使代码更加清晰,减少了直接操作底层方法可能引发的一些问题,并且可以直接看到操作的意图。
安全性:使用 Reflect 的方法可以避免一些潜在的问题,如在严格模式下直接使用 delete 可能会抛出错误,而 Reflect.deleteProperty 则会返回一个布尔值表示是否删除成功。

二者结合的好处

Proxy 的拦截器方法中可以调用 Reflect 的对应方法来实现默认行为或者在默认行为的基础上进行修改。例如,在 Proxy 的 get 拦截器中,可以使用 Reflect.get 方法来获取原始对象的属性值,并对其进行修改或返回。

let handler = {get: function(target, key, receiver) {return 1},set: function (target, key, value, receiver) {console.log(`setting ${key}!`);return Reflect.set(target, key, value, receiver);}
}
var obj = new Proxy({}, handler)
obj.a = 5 // setting 5!
console.log(obj.a) // 1

总结

Proxy 和 Reflect 是相辅相成的,通过结合使用它们可以实现更灵活和强大的代理功能,并且使用 Reflect 可以更好地管理和执行底层操作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/215301.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

远程工作:自由职业者如何成功赚钱

前言 在这个不断进步的数字化时代,远程工作已经从一个可选的边缘工作方式,成长为主流职业趋势的一部分。特别是自从全球疫情改变了我们的生活和工作方式以来,远程工作的概念不再是遥不可及的理想,而是已经成为许多人日常工作的现…

SpringBoot集成swagger2配置权限认证参数

作者简介:大家好,我是撸代码的羊驼,前阿里巴巴架构师,现某互联网公司CTO 联系v:sulny_ann(17362204968),加我进群,大家一起学习,一起进步,一起对抗…

[Java][JDK5]可变参数

我们可以假设一种情况,我们需要进行求和计算 在原先,我们考虑到参数只能传入一个数字,因此我们会将需要求和的数字放在一个数组,传入该数组进入方法再拆分计算 比如下面的例子:使用了增强for来对数组进行遍历 public class Mai…

【Lidar】基于Python的三维点云数据转二维平面+散点图绘制

最近一直在搞点云相关的操作,有时候在处理点云数据时需要查看处理后的数据是否满足需求,所以就想着写一套展示点云的代码。之前已经分享过如何可视化点云了,感兴趣的可以自己去看下:【Lidar】基于Python的Open3D库可视化点云数据。…

golang https server如何设计方便抓包定位且安全

代码 测试 用go写后端https服务时,需要定位https包中的内容是否符合预期。 有涉猎的朋友应该了解过https有一种keylog技术,它允许在HTTPS连接中捕获和记录SSL或TLS会话密钥,以便于调试和分析加密流量。 本文将的就是通过可控制开启和关闭的…

单身狗(Python)

题目描述 单身狗 “单身狗”是中文对于单身人士的一种爱称。本题请你从上万人的大型派对中找出落单的客人,以便给予特殊关爱。 输入格式: 输入第一行给出一个正整数 N(≤50000),是已知夫妻/伴侣的对数;…

CPU 混合推理,非常见大模型量化方案:“二三五六” 位量化

本篇文章聊聊网上聊的比较少的具体量化操作,非常见整型位数的量化,来自让各种开源模型能够在 CPU 环境、CPU & GPU 环境混合推理的技术方案:llama.cpp 。 写在前面 接下来,有计划分享一些关于各种开源模型的实践内容。为了能…

安装ThingBox Eclipse Plugin

1. ChatGPT问 The latest version of the ThingBox Eclipse Plugin requires Eclipse IDE 2021-06 or later. 2. PTC官网下载 MED-61378-CD-092_F000_Eclipse-Plugin-9-0-1.zip文件, 和 MED-61098-CD-085_F000_ThingWorx-Extension-SDK-8-5-0(需要账号&#xff09…

虚拟化逻辑架构:KVM虚拟机通过OVS端口组实现网络连接

目录 一、实验 1.CentOS 7 安装 OpenVSwitch(构建RPM安装包) 2.KVM虚拟机通过OVS端口组实现网络连接 二、问题 1.安装openvswitch-2.5.10报错 2.virt-install未找到命令 3.如何删除自定义网络 一、实验 1.CentOS 7 安装 OpenVSwitch(构建RPM安装包&#xff…

字符串知识点

一. 1.字符占据一个字节 2.字符数组:char name[15] { W, a, n, g, L, i}; 字符串:char name[15] “Wang Li”; 二. 1.字符串:为有效长度(有效字符的个数)而不是字符数组的长度; 2.&#…

创建一个有阴影的threejs三维几何体

import * as THREE from "three" import { OrbitControls } from three/examples/jsm/controls/OrbitControlsconst width window.innerWidth; const height window.innerHeight;//创建场景 const scene new THREE.Scene(); scene.background new THREE.Color(#6…

LinuxBasicsForHackers笔记 --Python 脚本基础

添加Python模块 Python 有一个专门用于安装和管理 Python 包的包管理器,称为 pip(Pip Installs Packages)。由于我们在这里使用 Python 3,因此您将需要 Python 3 的 pip 来下载和安装软件包。默认情况下应包含 Pip,但…

学习Node.js与Webpack总结

今天学习了模块化的简介,其实一个项目是由很多个模块文件组成的,它们有它们各自的功能和用途来协助这个项目的完成,这样的模块组成有很多的好处比如提高代码的复用性、还可以按需加载、还有独立的作用域,还需要搞清楚的一点就是No…

如何截取Hive数组中的前N个元素?

文章目录 1、需求描述2、使用索引3、使用posexplode()4、转换为字符串操作 1、需求描述 需求:截取任意给定数组中的前N个元素,返回截取后的子数组 假设我们有如下三种类型的Hive数组: select array(1,2,3,4) -- [1,2,3,4] selec…

vue前端访问Django channels WebSocket失败

现象 前端报错:SSH.vue:51 WebSocket connection to ‘ws://127.0.0.1:8000/server/terminal/120.59.88.26/22/1/’ failed: 后端报错:Not Found: /server/terminal/120.79.83.26/22/1/ 原因 django的版本与channels的版本不匹配(django…

关于个人职业选择

职业选择,一直是个老生常谈的话题。这并不是一个容易做的决定。 让我们来看看AI怎么说。 首先是方向性的回答: 然后是一些具体的回答 我个人比较倾向于深耕网络安全。这是一个很有趣也是一个持续发展着的领域。 不知道关于这个事情你怎么看&#xff0…

在线学习平台-课程分页、用户管理、教师查询

在线学习平台------手把手教程👈 用户管理 添加功能增强 新增属性 若依里的用户模块(SysUser)是没有课程这一属性的,要实现我们自己的课程分页查询功能 这个位置传入的实体类SysUser要加上classId,记得加上get、set方法 更改sql语句 ctrl 鼠标左键不断点进去…

DS二叉排序树之删除

Description 给出一个数据序列,建立二叉排序树,并实现删除功能 对二叉排序树进行中序遍历,可以得到有序的数据序列 Input 第一行输入t,表示有t个数据序列 第二行输入n,表示首个序列包含n个数据 第三行输入n个数据…

蓝桥杯周赛 第 1 场 强者挑战赛 6. 小球碰撞【算法赛】(思维题/最长上升子序列LIS)

题目 https://www.lanqiao.cn/problems/9494/learning/?contest_id153 思路来源 Aging代码 题解 二分时间t&#xff0c;第i个小球对应一个起点pi、终点pit*vi的区间&#xff0c;问题转化为&#xff0c; 选最多的区间&#xff0c;使得不存在区间包含&#xff08;即li<l…

微信小程序过滤器之计算当前时间差

微信小程序过滤器之计算当前时间差 前言一、wxs简介二、使用步骤1.定义2.使用 前言 最近遇到了一个需求&#xff0c;将小程序里面的具体时间2023-12-11 09:41:06转为当前时间差10小时前&#xff0c;这块可以使用js逻辑函数对数据进行处理&#xff0c;但这里我们采用微信小程序…