vue2和vue3数据代理的区别

前言:

vue2 的双向数据绑定是利⽤ES5的⼀个 API ,Object.defineProperty( )对数据进行劫持结合发布订阅模式的方式来实现的。
vue3 中使⽤了 ES6Proxy代理对象,通过 reactive() 函数给每⼀个对象都包⼀层Proxy,通过 Proxy监听属性的变化,从而实现对数据的代理操作。

一,Object.defineProperty( )

  let obj = { }let val = ''Object.defineProperty(obj,'name',{enumerable: true, // 表示该属性是否可以在 for...in 循环中被枚举。默认为 false。configurable: true, // 能否被删除 默认falseget(){console.log(`访问name属性`)return val },set(newVal){console.log('newVal',newVal);val = newVal}})obj.name = 'coderkey' // 触发set方法
console.log(obj.name);  // 触发get方法
obj.age = '18'   // 不会触发set方案
console.log(obj.age); // 不会触发get方法
delete obj.name;   // 不会触发set方案

注意:只能访问和修改,新增和删除不会触发set方法


二,Proxy代理对象

let obj = {name: 'coderkey',age: 18,habby: {try1: '篮球鸡坤',try2: '足球'}
}
let handler = {// 访问get(target, prop) {console.log('触发get方法',target[prop]);return Reflect.get(target, prop)},// 修改与新增set(target, prop, value) {console.log('触发set方法',value);//通过反射对象把数据反射出去return Reflect.set(target, prop, value)},// 删除deleteProperty(target, prop) {console.log('触发delete方法');return Reflect.set(target, prop)}
}
let proxyObj = new Proxy(obj,handler)// 通过代理对象对目标对象进行增删改查操作
proxyObj.name = 'pink' // 触发set方法
proxyObj.sex = '男'  // 触发set方法
console.log(proxyObj.sex); // 触发get方法
delete proxyObj.sex // 触发deleteProperty方法
console.log(proxyObj.sex); // 触发get方法 undefined
console.log(proxyObj); // 代理对象 {name: 'pink', age: 18, sex: undefined} 

注意: 可以代理同一层对象,可以增删改查操作


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

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

相关文章

【剖析】为什么说RBF神经网络的误差为0

本文来自《老饼讲解-BP神经网络》https://www.bbbdata.com/ 机器学习中的模型非常的多,但如果要问有没有这样的一个模型,它的训练误差为0,那么就非RBF神经网络莫属了!下面我们来聊聊,为什么RBF神经网络的训练误差为0。…

WDF驱动开发-特定于KMDF的技术(一)

这部分的技术是一些零散的记录知识点,它们主要是在WDF框架中特定于KMDF的部分。 将内核模式驱动程序框架和非 PnP 驱动程序配合使用 如果要为不支持 即插即用 (PnP) 的设备编写驱动程序,则驱动程序必须: 在 WDF_DRIVER_CONFIG 结构的 Driv…

了解请求参数与响应参数的区别:初学者指南

在 Web 的开发领域,无论你是前端开发还是后端开发人员,把握请求与响应参数的核心差异是极其重要的。这些参数在客户端和服务器之间的互动中扮演着关键角色。 请求参数的定义及类别 定义 当客户端向服务器提交信息时所使用的数据被称为请求参数。这些参…

【Docker】Docker下载安装_使用阿里云加速配置

1、下载安装 1.1前提条件 安装环境: 目前,CentOS 仅发行版本中的内核支持 Docker。Docker 运行在 CentOS 7 上,要求系统为64位、系统内核版本为 3.10 以上。Docker 运行在 CentOS-6.5 或更高的版本的 CentOS 上,要求系统为64位…

STM32上实现spwm调制原理分析

在STM32微控制器上实现SPWM(正弦脉宽调制,Sinusoidal Pulse Width Modulation)调制的核心是利用高频载波(三角波)与低频基波(正弦波)作比较得出。 那么在STM32里三角波和正弦波分别是什么&…

YzmCMS内核简约风非常不错的博客自媒体主题模板

本次发布的“Eric”主题模版文件中,已移除默认模版中一些非必要的模版,仅保留一些通用模版(首页、频道页、列表页、资源列表页、内容页、关于我/单页等),当前模版主题中提供的模版文件已经能够满足大部分网站使用。 YzmCMS内核简约风非常不错…

文件传输机制

文件传输机制通常涉及多种模式,其速率受到多种因素的影响。以下是对文件传输模式的概述以及影响速率的因素: 文件传输模式 文件传输模式可以根据不同的协议和技术分为多种类型,但最基本的区分是基于网络连接的方式和协议的使用。以下是一些…

IO-LINK主要参数说明及结构

目录 PDIN(Process Data Input) PDOUT(Process Data Output) 事件 ISDU(Indexed Service Data Unit) 直接页面参数 结构 关于IO-Link的主要参数,以下是关于PDIN、PDOUT、事件、ISDU以及直…

Java数据结构4-链表

1. ArrayList的缺陷 由于其底层是一段连续空间,当在ArrayList任意位置插入或者删除元素时,就需要将后序元素整体往前或者往后搬移,时间复杂度为O(n),效率比较低,因此ArrayList不适合做任意位置插入和删除比较多的场景…

明明设置允许跨域,为什么还会出现跨域请求的问题

一、问题 在微服务项目中,明明已经设置允许跨域访问: 为什么还会出现跨域请求问题? 二、为什么 仔细查看错误提示信息:When allowCredentials is true, allowedOrigins cannot contain the special value "*" since t…

Cesium如何高性能的实现上万条道路的流光穿梭效果

大家好,我是日拱一卒的攻城师不浪,专注可视化、数字孪生、前端、nodejs、AI学习、GIS等学习沉淀,这是2024年输出的第20/100篇文章; 前言 在智慧城市的项目中,经常会碰到这样一个需求:领导要求将全市的道路…

Jenkins定时构建自动化(二):Jenkins的定时构建

目录 ​编辑 一、 jenkins定时构建语法: 1. 语法规则: 2. 常见用法举例 3. 再次举例 接上一篇:Jenkins定时构建自动化(一):Jenkins下载安装配置:Jenkins定时构建自动化(一):Jenkins下载安装配置-CSDN博客 …

MySQL查询随机返回数据表的一条数据

要在MySQL中随机返回数据表的一条数据,可以使用ORDER BY RAND()子句。 但是,请注意,对于大型数据表,这可能会变得非常慢,因为它需要对整个表进行随机排序。对于小型到中型的数据表,这通常是可行的。 以下…

常见的LED显示屏拼接优缺点解析

LED显示屏拼接技术在现代显示技术中占据了重要地位。随着市场需求的不断增长,各种拼接屏技术也不断发展,每种技术都有其独特的优势和不足。本文将详细解析常见的几种拼接屏技术,包括LED显示屏拼接、投影DLP拼接和等离子PDP拼接。 LED显示屏拼…

STM32CubeIDE提示找不到头文件(No such file or directory)的解决办法

0 前言 最近在使用STM32CubeIDE时,发现为工程添加了头文件路径,但编译的时候还是报错,提示找不到头文件: 1 解决办法 1.1 为工程添加头文件路径 右键我们的工程,然后添加头文件路径(最好是相对路径&am…

秋招突击——第八弹——Redis是怎么运作的

文章目录 引言正文Redis在内存中是怎么存储的面试重点 Redis是单线程还是多线程面试重点 内存满了怎么办?面试重点 持久化介绍面试重点 RDB持久化面试重点 AOF日志面试重点 总结 引言 差不多花了两天把redis给过了,早上也只背了一半,完成回去…

如何发现Redis热Key,有哪些解决方案?

什么是 hotkey? 如果一个 key 的访问次数比较多且明显多于其他 key 的话,那这个 key 就可以看作是 hotkey(热 Key)。例如在 Redis 实例的每秒处理请求达到 5000 次,而其中某个 key 的每秒访问量就高达 2000 次&#x…

Pytorch-----(3A)基本的统计

一、问题 进行基本的张量统计如均值、中位数、众数等;进行基本的统计有助于应用概率分布和统计推断。Torch功能与Numpy类似,但是Torch函数支持GPU加速。以下是创建基本统计量的函数; 二、如何实现 &#x…

nuc马原复习资料

哲学:世界观的理论形态,或者说是系统化、理论化的世界观;世界观和方法论的统一。马克思主义哲学:辩证唯物主义和历史唯物主义,关于自然。社会和思维发展的普遍规律的学说,无产阶级世界观的理论体系。世界观…

MySQL中的系统变量权限

MySQL的系统变量用于控制服务器的操作。它们可以是全局的(影响整个MySQL服务器实例),也可以是会话的(仅影响当前客户端会话),或者两者兼有。 你可以使用SET语句来动态地改变这些变量的值。例如&#xff1a…