什么时候要用到Reflect API?

参考文档
https://www.zhihu.com/question/460133198
https://cn.vuejs.org/guide/extras/reactivity-in-depth.html
https://juejin.cn/post/7103764386220769311

Reflect API 一般搭配 Proxy API 一起使用。什么是 Proxy API 呢?
先回顾下 vue 的数据响应性是如何实现的。

Vue2 用逐个属性 Object.defineProperty()改 get 和 set 方法来实现,对于某些情况数据绑定不生效,要强制刷新。比如直接改变数组下标(defineProperty能监听,但因性能问题放弃。数组部分 api 比如 push 通过重写实现监听);无法监听属性的增加和删除。层级深时还会有性能问题。

到了 Vue3 改为用 Proxy、 Reflect API 实现。相比defineProperty不需要遍历所有属性要改写 get 和 set 方法,提高效率。

let validator = {set: function (obj, prop, value, receiver) {return Reflect.set(obj, prop, value, receiver)},
};let person = new Proxy({}, validator);

对于 Vue2 之前的问题也能解决:

  1. 无法监听删除属性
  2. 无法监听新增属性,直接改变数组下标

看到上面的代码,你会好奇,为啥 set 要用 Reflect.set,不直接object[prop]=value? 还要最后的 receiver 参数有什么用?

看文档,receiver 是 this 的指向,如果我们直接object[prop]=value,会有什么问题呢?

const a = {firstName:'Z', secondName: 1, get name () {return this.firstName+this.secondName}
}
const proxy = new Proxy(a, {get(obj, prop, receiver) {return obj[prop]},set(obj, prop,value) {obj[prop] = valuereturn true}
})
const b = {secondName:2
}
Object.setPrototypeOf(b, proxy);
console.log(b.name) // Z1
const a = {firstName:'Z', secondName: 1, get name () {return this.firstName+this.secondName}
}
const proxy = new Proxy(a, {get(obj, prop, receiver) {return Reflect.get(obj, prop, receiver)},set(obj, prop,value ,receiver) {return Reflect.set(obj, prop,value, receiver)}
})
const b = {secondName:2
}
Object.setPrototypeOf(b, proxy);
console.log(b.name) // Z2

文档里说 receiver是调用时 this 的指向,第一个参数 target 是目标对象,在上面的例子里,因为 b 没有 name 属性,所以沿着原型链去找,在 a 找到了,此时 get 方法里,obj 就是 a,recevier 仍是 b,我们按照预期应该是用 b 的 secondName 才对。
同时,b 是没有 firstName 的,看结果最后也从 a 里取到 firstName 的值了。

Reflect API 除了能保证 this 的指向正确,还帮助我们在进行 Proxy 编程时代码更清晰。
这里只是 get 和 set 的例子, 可以直接return obj[prop]或者obj[prop]=value,但 Proxy 还有很多其他的 API,如果这些 API都 要重新实现一次原本的行为比较麻烦,也不清晰。直接调用 Reflect.xxx这样就方便很多。
在这里插入图片描述

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

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

相关文章

投票项目_注册功能版本迭代

V0版本: 简单的注册,前端先进行初步核对,两次输入的密码是否相等?用户账号和密码是否符合要求?核对成功后前端传来账号密码,拿到用户名去数据库核对,如果没有找到相同的用户名就插入到数据库,找到相同的用户名就返回”用户已存在” V1版本: 加入了uuid 1. 导入依赖 <!-- …

《银幕上的编码传奇:计算机科学与科技精神的光影盛宴》

目录 1.在电影的世界里&#xff0c;计算机科学不仅是一门严谨的学科&#xff0c;更是一种富有戏剧张力和人文思考的艺术载体。 2.电影作为现代文化的重要载体&#xff0c;常常以其丰富的想象力和视觉表现力来探讨计算机科学和技术的各种前沿主题。 3.电影中的程序员角色往往…

GDB之(3)加载指定动态库文件

GDB之(3)加载指定动态库文件 Author&#xff1a;Once Day Date&#xff1a;2024年2月26日 漫漫长路&#xff0c;才刚刚开始… 全系列文章请查看专栏: Linux实践记录_Once-Day的博客-CSDN博客 推荐参考文档&#xff1a; gdb 查找动态库方法_info sharedlibrary-CSDN博客GDB…

swift -- 系统语音识别(转文字)

文章目录 一、系统类1. 导入系统库2. SFSpeechRecognizer声音处理器3. SFSpeechAudioBufferRecognitionRequest 语音识别器4. AVAudioEngine 处理声音的数据5. SFSpeechRecognitionTask 语言识别任务管理器 二、代码整理1. 初始化属性2. 判断权限3. 开始语音识别4. 停止语音识别…

服务器权限:Error: EACCES: permission denied, open‘/Cardiac/uniquC.csv

背景&#xff1a; 我想在服务器上传一个文件uniquC.csv&#xff0c;但是服务器说我没有权限 解决方案&#xff1a; 1. 查看目前是否存在对文件夹的权限 ls -ld /Cardiac/ # your fold path 此时&#xff0c;我发现 这也意味着root也没有赋予写的权限。 2. 拿到root权限 …

关于Ajax的入门基础教学

AJAX概述 AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;是一种用于创建交互式网页应用程序的技术&#xff0c;它可以在不重新加载整个页面的情况下向服务器发送请求并接收响应。这种技术使得网页可以实现异步通信&#xff0c;提高了用户体验和页面的响应速度。…

Kotlin多线程

目录 线程的使用 线程的创建 例一&#xff1a;创建线程并输出Hello World Thread对象的用法 start() join() interrupt() 线程安全 原子性 可见性 有序性 线程锁 ReentrantLock ReadWriteLock 线程的使用 Java虚拟机中的多线程可以1:1映射至CPU中&#xff0c;即…

ARM 版银河麒麟桌面系统下 Qt 开发环境搭建指南

目录 前言安装Linux ARM 版 QtCreator配置 Qt Creator配置构建套件 第一个麒麟 Qt 应用程序小结 前言 在上一篇文章信创ARM架构QT应用开发环境搭建中建议大家使用 Ubuntu X86 系统作为信创 ARM 架构 QT 应用的开发环境&#xff0c;里面使用了交叉编译的方式。这对于自己的 Qt …

vue3 + vite + ts 中使用less文件全局变量

文章目录 安装依赖新建css变量文件全局引入css变量文件使用css变量 一、安装依赖 npm install less less-loader --save-dev 二、新建CSS变量文件 (1) :在根目录下的src文件中 src-> asset -> css ->glibal.less // glibal.less :root{--public_background_font_Col…

Dubbo知识点大全

“ 分布式应用场景有高并发,高可扩展和高性能的要求。还涉及到,序列化/反序列化,网络,多线程以及设计模式的问题。幸好 Dubbo 框架将上述知识进行了封装,让程序员能够把注意力放到业务上。 概念和架构 Provider:暴露服务的服务提供方Consumer:调用远程服务消费方Regist…

CUDA编程 - 用向量化访存优化 elementwise 核函数 - 学习记录

Cuda elementwise 一、简介1.1、ElementWise1.2、 float4 - 向量化访存 二、实践2.1、如何使用向量化访存2.2、Cuda elementwise - Add2.3、Cuda elementwise - Sigmoid2.3.1、简单的 Sigmoid 函数2.3.2、ElementWise Sigmoid float4&#xff08;向量化访存&#xff09; 2.4、C…

商家入驻平台怎么让资金自动分配给商家

最近很多上线了多商户电商系统的朋友咨询&#xff0c;我们平台的用户支付后&#xff0c;钱进入了我们的对公账户&#xff0c;怎样让钱在走完流程后&#xff0c;自动进入商家的账户呢&#xff1f;今天商淘云为您分享商户入驻平台自动分配给商家资金的三种方法。 首先是平台应建立…

Docker基础(一)

文章目录 1. 基础概念2. 安装docker3. docker常用命令3.1 帮助命令3.2 镜像命令3.3 容器命令3.4 其他命令 4. 使用案例 1. 基础概念 镜像&#xff08;Image&#xff09;&#xff1a;Docker 镜像&#xff08;Image&#xff09;&#xff0c;就相当于是一个 root 文件系统。比如官…

node14下运行项目报错:regeneratorRuntime is not defined

regeneratorRuntime is not defined&#xff0c;这是由于配置babel出错问题&#xff0c;由于使用了es7语法如async/await而当前babel版本过低 解决&#xff1a; npm install -D babel-plugin-transform-runtime babel-runtime 安装完成后在.babelrc文件下配置&#xff1a; &qu…

vue2与vue3的diff算法有什么区别

在 Vue 中&#xff0c;虚拟 DOM 是一种重要的概念&#xff0c;它通过将真实的 DOM 操作转化为对虚拟 DOM 的操作&#xff0c;从而提高应用的性能。Vue 框架在虚拟 DOM 的更新过程中采用了 Diff 算法&#xff0c;用于比较新旧虚拟节点树&#xff0c;找出需要更新的部分&#xff…

远程连接Redis

以连接阿里云上的Redis为例 1. 在阿里云安全组中开放端口 2.修改Redis启动时所用的配置文件&#xff08;redis.conf&#xff09; 2.1 修改ip地址 如图&#xff1a;将默认的本地ip bind 127.0.0.1地址改为bind 0.0.0.0 2.2 将保护模式关闭 将默认的 supervised yes 改为 n…

Transformer视频理解学习的笔记

今天复习了Transformer,ViT, 学了SwinTransformer, 还有观看了B站视频理解沐神系列串讲视频上&#xff08;24.2.26未看完,明天接着看&#xff09; 这里面更多论文见&#xff1a;https://github.com/mli/paper-reading/ B站视频理解沐神系列串讲视频下&#xff08;明天接着看&a…

QPair和QMap

QPair和QMap是Qt框架中用于不同目的的两种容器类型&#xff0c;它们各自有不同的使用场景和特点。 QPair QPair是一个模板类&#xff0c;用于存储一对值&#xff0c;这对值可以是任意类型。它类似于C标准库中的std::pair。QPair通常用于当函数需要返回两个值时或者需要将两个…

认证模式~

认证方式 基于Cookie和Session的认证方式 基于Cookie和Session的认证是传统的Web应用认证机制。它依赖于HTTP协议无状态的特性&#xff0c;在客户端&#xff08;浏览器&#xff09;和服务器之间保持用户的状态。 工作原理 用户登录&#xff1a;用户通过输入用户名和密码来登…

速盾网络:组建CDN服务器加速

在当前互联网时代&#xff0c;网站的速度对用户体验和搜索引擎排名至关重要。为了提升网站的访问速度和性能&#xff0c;越来越多的网站选择使用CDN&#xff08;内容分发网络&#xff09;服务。本文将介绍如何利用速盾网络来组建CDN服务器&#xff0c;以加速网站访问。 1. 选择…