Vue3 数据响应式原理
核心:
-
通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等…
-
通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作
const userData = {name: "John",age: 12
};let proxyUser = new Proxy(userData, {// 拦截读取属性值get (target, prop) {return Reflect.get(target, prop)},// 拦截设置属性值或添加新属性set (target, prop, value) {return Reflect.set(target, prop, value)},// 拦截删除属性deleteProperty (target, prop) {return Reflect.deleteProperty(target, prop)}
})
// 设置属性值
proxyUser.name = 'bob'
proxyUser.age = 13// 添加属性
proxyUser.sex = '男'
console.log(user)// 删除属性
delete proxyUser.sex
console.log(user)
Vue3的响应式比Vue2好在哪里?
- 效率更高了,Vue2中假设监听某个对象,该对象中有一万个属性,他要循环遍历得到每个属性,并且通过每个属性的Object.defineProperty为每个属性加上set 和 get 方法,那如果有一万个就要加上一万对get 和 set方法,所以效率就很低;Vue3中直接一个代理对象proxy加上Reflect,再调用相关的方法就可以解决这个问题;
- Vue3中响应式的话是个深层次的监视,可监听对象里面的对象和数组;
相关文章:
Vue3 数据响应式原理
核心: 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等… 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作 const userData {name: "John",age: 12 };let proxyUser new Proxy(use…...
2023.08.20 学习周报
文章目录 摘要文献阅读1.题目2.现有问题3.解决方案4.本文贡献5.方法5.1 利用长短期记忆网络学习时空演化特征5.2 构建用于气象辅助信息编码的堆叠自编码器5.3 使用多任务学习发现全市通用模式5.4 模型 6. 实验6.1 数据集6.2 实验设置6.3 实验结果 7.结论8.展望 大气污染物传输总…...
软件测试技术之单元测试—工程师 Style 的测试方法(2)
怎么写单元测试? JUnit 简介 基本上每种语言和框架都有不错的单元测试框架和工具,例如 Java 的 JUnit、Scala 的 ScalaTest、Python的 unittest、JavaScript 的 Jest 等。上面的例子都是基于 JUnit 的,我们下面就简单介绍下 JUnit。 JUnit…...
项目中超图 for openlayer和超图for cesium同时引入的问题
一个项目中同时用到了超图的openlayer和cesium版本,首先我是外部引入的超图的开发包,你要是通过npm导入的那就没关系了。 <script type"text/javascript" src"/static/openlayer/supermap/ol/iclient-ol.min.js"></script&…...
3D与沉浸式技术,如何助力企业数字化转型?
说起3D,估计许多读者朋友会在第一时间想起《阿凡达》系列和《侏罗纪公园》系列电影大作。每一帧细节纤毫毕现的逼真画面,让观众几乎分不清虚拟与现实,完全沉浸在导演打造的视觉盛宴中。 事实上,除了大家所熟知的3D影视动画之外&am…...
excel vba 将多张数据表的内容合并到一张数据表
功能描述: 一个Excel文件有很多个 样式相同 的数据表, 需要将多张数据表的内容合并到一张数据表里。 vba实现代码如下: Attribute VB_Name "NewMacros" Option Explicit Public Const Const_OutSheetName As String "V…...
接口和抽象类的区别?解析接口和抽象类的特点和用法
接口和抽象类的区别?解析接口和抽象类的特点和用法 引言 在面向对象编程中,接口和抽象类是两个非常重要的概念。它们都可以用于定义一组相关的方法,但在实际使用中有一些差异。本文将探讨接口和抽象类的区别,并通过示例代码和测…...
vscode-vue项目格式化
一、插件要求 Prettier Vetur 二、配置文件 {"workbench.startupEditor": "newUntitledFile","files.autoSave": "off", // 关闭文件自动保存,避免开发时候页面变化"editor.tabSize": 2, // tab距离"ve…...
SAP MM学习笔记26- SAP中 振替转记(转移过账)和 在库转送(库存转储)1- 移动Type间振替转记
SAP 中在库移动 不仅有入库(GR),出库(GI),也可以是单纯内部的转记或转送。 1,振替转记(转移过账) 2,在库转送(库存转储) 1ÿ…...
SAP SPL(Special Ledger)之注释行项目-Noted Items
财务凭证过账里常见的SPL特殊总账标识根据业务主要有三种,BoE-billing of exchange: 汇票业务,包括商业汇票和银行汇票;Down Payment,预付款业务,包括供应商和客户预付款和申请;其它,一般是保证…...
学习平台助力职场发展与提升
近年来,随着互联网技术的发展,学习平台逐渐成为了职场发展和提升的必备工具。学习平台通过提供丰富的课程内容、灵活的学习时间和个性化的学习路径,帮助职场人士更好地提升自己的技能和知识储备,为职场发展打下坚实的基础。 学习…...
有没有免费格式转换工具推荐?PDF转化为PPT的方法
在当今职场生活中,掌握文件格式转换技能变得异常重要。将PDF文档转换为PPT格式可以在演讲、报告等场合更好地展示和传达信息,为我们的专业形象增添亮点,接下来我们可以一起来看一下“有没有免费格式转换工具推荐?PDF转化为PPT的方法”相关的…...
【LeetCode-经典面试150题-day12】
20.有效的括号 题意: 给定一个只包括 (,),{,},[,] 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括…...
TCP机制-延迟应答,捎带应答
在看本篇博客前推荐先看TCP中窗口和滑动窗口的含义以及流量控制 延迟应答和捎带应答都是TCP用于提高网络传输效率的机制 延迟应答 当发送端发送数据给接收端了以后,按道理接收端的内核会立即返回ACK(应答报文)给发送端,而且ACK&a…...
【Redis从头学-8】Redis中的ZSet数据类型实战场景之用户积分榜
🧑💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 📖所属专栏:Re…...
Springboot内嵌SQLite配置使用
版本号 MacOS Apple M1 | Jdk17 | Maven 3.8.5 | SpringBoot 2.6.9 | SQLite 3.42.0.0 pom.xml <dependencies><dependency><groupId>org.xerial</groupId><artifactId>sqlite-jdbc</artifactId><version>3.42.0.0</version&g…...
【微服务学习笔记】认识微服务
【微服务学习笔记】认识微服务 单体架构 分布式架构 微服务架构 SpringCloud 服务拆分和注意事项 服务拆分的案例demo 各个服务之间的数据库都是相互独立的,你不能直接访问对方的数据库,只能从一个服务像另外一个服务发起远程调用 在订单模块的服务中 …...
基于Android R快速编译recovery-ramdisk.img
Android默认没有单编recovery-ramdisk.img的命令,我们可以自己修改Makefile实现 修改:build/core/Makefile 添加: .PHONY: recovery-ramdisk-nodeps recovery-ramdisk-nodeps: $(MKBOOTFS) | $(COMPRESSION_COMMAND_DEPS)echo "make …...
Redis分布式缓存
分布式缓存 -- 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题: 1.Redis持久化 Redis有两种持久化方案: RDB持久化 AOF持久化 1.1.RDB持久化 RDB全称Redis Database Backup file(Redis数据备份文件)&#x…...
最大公约数和最小公倍数
最大公约数: 概念: 公约数中最大的称为最大公约数。 对任意的若干个正整数,1总是它们的公因数。 公约数与公倍数相反,就是既是A的约数同时也是B的约数的数,12和15的公约数有1,3,最大公约数就是…...
iMeta入选新锐期刊分区表生物学1区Top
2026年3月24日,2026年新锐期刊分区表正式发布。iMeta被评选为生物学1区Top期刊,标志着iMeta期刊学术声誉与影响力持续提升。自创刊以来,iMeta的每一步成长都离不开期刊编委、审稿专家及广大同行的鼎力支持。未来,iMeta将再接再厉&…...
Multisim仿真-FSK调制系统设计与性能优化
1. FSK调制系统基础与Multisim入门 FSK(频移键控)是数字通信中最基础的调制方式之一,它通过不同频率的载波来表示二进制数据。在实际工程中,Multisim作为电子电路仿真利器,能帮我们快速验证设计思路。我刚开始接触通信…...
编写程序实现智能鱼竿鱼线拉力检测,拉力超标提示“小心断线”。
🎣 项目实战:基于应变片的智能鱼竿拉力监测系统一、实际应用场景描述 (Scenario)在海钓或路亚钓法中,鱼竿的调性(Action)和钓线的磅数(LB)至关重要。新手往往凭感觉遛鱼,当大鱼突然发…...
GNN实战:Cora、Citeseer、PubMed三大文献数据集保姆级使用指南(附代码)
GNN实战:Cora、Citeseer、PubMed三大文献数据集深度解析与工程实践 引言:为什么这三个数据集成为GNN研究的"黄金标准"? 在探索图神经网络(GNN)的浩瀚宇宙中,Cora、Citeseer和PubMed如同三颗璀璨的…...
Rainmeter皮肤主题用户行为分析:使用数据统计
Rainmeter皮肤主题用户行为分析:使用数据统计 【免费下载链接】rainmeter Desktop customization tool for Windows 项目地址: https://gitcode.com/gh_mirrors/ra/rainmeter Rainmeter作为一款强大的Windows桌面自定义工具,允许用户通过皮肤主题…...
ONLYOFFICE Docs与Nextcloud Calendar集成:打造高效私有云日程协作平台
ONLYOFFICE Docs与Nextcloud Calendar集成:打造高效私有云日程协作平台 【免费下载链接】DocumentServer ONLYOFFICE Docs is a free collaborative online office suite comprising viewers and editors for texts, spreadsheets and presentations, forms and PDF…...
Orleans分布式追踪终极指南:Jaeger与Zipkin深度对比分析
Orleans分布式追踪终极指南:Jaeger与Zipkin深度对比分析 【免费下载链接】orleans dotnet/orleans: Orleans是由微软研究团队创建的面向云应用和服务的分布式计算框架,特别适合构建虚拟 actor模型的服务端应用。Orleans通过管理actors生命周期和透明地处…...
黑马点评技术汇总(一)验证码登录
一、session实现验证码登录总思路: 前端提交手机号发起code请求,服务端校验手机号是否符合格式,成功后生成验证码存入session并发送给用户。 用户提交手机号和验证码验证手机是否符合格式(这里有个bug)验证码是否和ses…...
基于CYBER-VISION零号协议构建智能技术文档翻译与摘要系统
基于CYBER-VISION零号协议构建智能技术文档翻译与摘要系统 1. 引言 对于很多开发者来说,阅读英文技术文档是件挺头疼的事。尤其是遇到一些前沿的开源项目,官方文档全是英文,里面还夹杂着大量的专业术语和复杂的配置说明。有时候,…...
高效解决付费墙难题:Bypass Paywalls Clean实用技术指南
高效解决付费墙难题:Bypass Paywalls Clean实用技术指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在数字信息时代,付费墙已成为获取优质内容的主要障碍&…...
