关于数据劫持原理(vue2和vue3)

数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。

Object.defineProperty

const user = {username: 'xiaoming',age: 10
}
let username = user.username
Object.defineProperty(user, 'username', {get() {return username},set(val) {console.log('修改了属性', val);}
})
console.log(user.username); //xiaoming
user.username = 'zhangsan' // 修改了属性 zhangsan

第一个参数是劫持的对象,第二个参数是劫持的对象属性,第三个参数是执行对象,包括get set方法,此时只能针对一个属性进行劫持,那么我们可以封装一下。

const user = {username: 'xiaoming',age: 10
}function defineProperty(data,key,value){Object.defineProperty(data, key ,{get() {console.log(`使用了${key}这个属性`);return value},set(val) {console.log(`修改了${key}属性`, val);value=val}})
}
Object.keys(user).forEach(el=>{defineProperty(user,el,user[el])
})console.log(user.username);
console.log(user.age);

当使用Object.defineProperty监听的对象属性是数组时,使用push、unshift、pop、shift、splice, ‘sort’, reverse监听是触发不了set的。只要不是重新赋值一个新的数组对象,任何对数组内部的修改都不会触发set方法的执行。

不能监听属性新增和删除操作,由于js的动态性,可以为对象追加新的属性或者删除其中某个属性,这点对经过Object.defineProperty方法建立的响应式对象来说,只能追踪对象已有数据是否被修改,无法追踪新增属性和删除属性。

Proxy

可以对目标对象的读取、函数调用等操作进行拦截,然后进行操作处理。它不直接操作对象,而是像代理模式,通过对象的代理对象进行操作,在进行这些操作时,可以添加一些需要的额外操作。

参数:

target:为所要代理的目标对象(target 为一个对象)

handler :对代理对象的拦截时进行的操作

let obj={a:1,b:2
}
const p = new Proxy(obj,{//target就是person本身//以下两种方式都可以,vue3主要采用Reflect的方式get(target,propName){// return target[propName]console.log(`读取数据`);return Reflect.get(target,propName)},//读取和新增属性,都会调用这个方法set(target,propName,value){// target[propName] = valueconsole.log(`修改或添加数据`);Reflect.set(target,propName,value)},deleteProperty(target,propName){// return delete target[propName]console.log(`删除数据`);return Reflect.deleteProperty(target,propName)}
})
console.log(p.a);
p.b=1
delete p.b

Proxy性能优于Object.defineProperty。 Proxy代理的是整个对象Object.defineProperty只代理对象上的某个属性,如果是多层嵌套的数据需要循环递归绑定;

对象上定义新属性时,Proxy可以监听到,Object.defineProperty监听不到,需要借助$set方法;

数组的某些方法(push、unshift和splice)Object.defineProperty监听不到,Proxy可以监听到;

vue2的数据劫持和vue3数据劫持的区别就在这里:

通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写,属性的添加,属性的删除等,比起vue2多出了增加和删除属性的监听。

通过Reflect(反射):对源对象的属性进行操作。类似于objec的操作方法。

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

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

相关文章

Web前端JS如何获取 Video/Audio 视音频声道(左右声道|多声道)、视音频轨道、音频流数据

写在前面: 根据Web项目开发需求,需要在H5页面中,通过点击视频列表页中的任意视频进入视频详情页,然后根据视频的链接地址,主要是 .mp4 文件格式,在进行播放时实时的显示该视频的音频轨道情况,并…

史上最全低代码平台盘点!三分钟盘点2023年顶尖二十个低代码平台!

史上最全低代码平台盘点!三分钟盘点2023年顶尖二十个低代码平台! 什么是低代码平台?2023年顶尖二十大低代码平台,哪个值得一试?低代码平台应该如何选择?本篇,我们将为大家盘点顶尖的十大低代码平…

分享一个简单的基于C语言嵌入式GUI界面切换代码

目录 前言 一、数据类型 二、页面调度 三、页面显示 四、视频展示 前言 最近在用LVGL写一个简单的UI界面,需要进行几个页面的切换,所以就自己写了一个简单页面切换代码,方便进行页面切换,同时使UI代码结构更加清晰。这个结构…

非常好的简历精选7篇

想要打造一份令人眼前一亮的简历,赢得招聘方的青睐?参考这7篇精选的“非常好的简历”案例!无论是应届毕业生还是职场人士,都能从中借鉴灵感,提升简历质量。让求职之路更加顺畅,轻松斩获心仪职位&#xff01…

【java毕业设计源码】基于SSM框架的在线智能题库管理系统设计与实现

该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程等学习内容。 目录 一、项目介绍: 二、文档学习资料: 三、模块截图: 四、开发技术与运行环境: 五、代码展示: 六、数据库表截图&#xff1a…

ABAP MODIFY 如何使用?有哪些细节需要注意?

MOIDFY 描述 在ABAP中的MODIFY是一个关键字,它可用于更新内表的数据。也可以用于更新数据库表的数据。这在SAP系统的编程中非常有用。 如何使用 MODIFY可以有两种形式:MODIFY TABLE和MODIFY LINE。 1. MODIFY TABLE:(用于修改数据库表、透…

智能优化算法应用:基于入侵杂草算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于入侵杂草算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于入侵杂草算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.入侵杂草算法4.实验参数设定5.算法结果6.参考…

c# OpenCV安装(一)

一 通过NuGet 安装四个拓展包 OpenCvSharp4、OpenCvSharp4.Extensions、OpenCvSharp4.runtime.win、OpenCvSharp4.WpfExtensions C#使用OpenCV的一些代码 需要加头文件 using OpenCvSharp; //为了使用opencv using Point OpenCvSharp.Point; //为了确定我们使用的poin…

296_C++_一个dialog对话框在执行exec向系统发送一个延后销毁事件时,另一个对话框立刻接管了上一个对话框的销毁事件,导致死UI

1、根因分析 -根因分析:当有新版本并且grade等级是2的时候,点击ptz的时候使用的是RSDialog,WA_DeleteOnClose属性默认是为true的, 并且是栈上的变量,当关闭ptz的时候,diolog的exec结束会向系统发送延后销毁事件,此时退出ptz会弹出自动升级对话框,接管了 事件循环,则会调用前面…

Android HCI日志分析案例1

案例1--蓝牙扫描设备过程分析 应用层发起搜索蓝牙设备,Android 官方提供的蓝牙扫描方式有三种,分别如下: BluetoothAdapter.startDiscovery(); //可以扫描经典蓝牙和BLE两种。BluetoothAdapter.startLeScan();//扫描低功耗蓝牙,…

Linux(openssl):创建CA证书,并用其对CSR进行签名

1.创建CA证书: 1.1创建CA证书目录ca,并进入ca $ mkdir ca $ cd ca 1.2创建CA证书私钥 $ openssl genrsa -aes256 -out ca.key 2048 Enter PEM pass phrase: Verifying - Enter PEM pass phrase: 输入两次密码后,在ca目录下生成了私钥文件ca.key 1.3生成CSR $ openssl req -…

数据领域建设的五大方向

1.数据技术的发力点 数据汇聚技术包括5G高速光纤ipv6下一代互联网、卫星互联网、叠加互联网、区块链、标识、编码和解析等;数据处理技术包括云计算、边缘计算、分布式计算、大数据处理、AI分析、绿色低碳、数据空间、隐私计算、区块链、数据脱敏、数据沙箱等&#…

stm32 can滤波器接收指定的ID

CAN 文章目录 CAN一、配置1、对扩展数据帧进行过滤:(只接收扩展数据帧)CAN_FilterIdHigh:CAN_FilterIdLow:2、对扩展远程帧过滤:(只接收扩展远程帧)3、对标准远程帧过滤:(只接收标准远程帧)4、对标准数据帧过滤:(只接收标准数据帧)5、对扩展帧进行过滤:(…

【Erlang进阶学习】2、匿名函数

受到其它一些函数式编程开发语言的影响,在Erlang语言中,将函数作为一个对象,赋予其“变量”的属性,即为我们的匿名函数 或 简称 fun,它具有以下特性: (匿名函数:不是定义在Erlang模…

<DB2>《AIX服务器DB2数据库裸设备表空间扩容方案》

《AIX服务器DB2数据库裸设备表空间扩容方案》 1 表空间状态查看1.1 连接数据库(实例用户操作)1.2 查看表空间剩余(实例用户操作)1.3 查看所属表空间的容器属性(实例用户操作) 2 VG状态和LV状态查看2.1 查看…

leetCode 40.组合总和 II + 回溯算法 + 剪枝 + used数组 + 图解

给定一个候选人编号的集合 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合。candidates 中的每个数字在每个组合中只能使用 一次 注意:解集不能包含重复的组合 示例 1: 输入: candidates [10,1,2,7,6,1,5], t…

基于51单片机的交通灯_可调时间_夜间+紧急模式

51单片机交通灯 1 讲解视频:2 功能要求3 仿真图:4 原理图PCB5 实物图6 程序设计:7 设计报告8 资料清单(提供资料清单所有文件):设计资料下载链接: 51单片机简易交通灯_可调时间_夜间紧急 仿真代…

LeetCode | 101. 对称二叉树

LeetCode | 101. 对称二叉树 OJ链接 在本函数里不好进行判断,我们另外定义一个函数来如果两个都相等为空,就返回true一个为空,一个不为空都不为空,就比较值然后递归1的左,2的右,1的右,2的左 bool _isSymm…

Unity 关于触摸事件的处理

在Unity 中,要处理触摸事件,主要有以下一些方法: Input.touches: 这个属性返回一个Touch数组,包含了当前帧中所有的触摸信息,包含触摸的数量、位置和状态等信息。 Input.touchCount: 这个属性返回当前帧中触摸的数量。…

Ubuntu安装过程记录

软件准备 硬件 Acer电脑,AMD a6-440m芯片 64g优盘一个,实际就用了不到5g。 Ubuntu :官网 下载Ubuntu桌面系统 | Ubuntu 下载桌面版Ubuntu 22.04.3 LTS LTS属于稳定版 u盘系统盘制作软件 Rufus :Rufus - 轻松创建 USB 启动…