vue3 原理【详解】Proxy 实现响应式

为了解决 vue2 的响应式缺陷 ,vue3 改用 Proxy 实现响应式

使用 Proxy 实现响应式

详见代码注释

// 仿写vue3的reactive -- 声明响应式对象
function reactive(target = {}) {//   若目标数据不是对象/数组,则直接返回 (reactive 的参数必须为对象/数组才能添加响应式)if (typeof target !== "object" || target == null) {return target;}const proxyConfig = {// 访问属性 -- target 目标数据,key 属性 , receiver 处理后的数据(即objProxy)get(target, key, receiver) {// 提取出目标数据本身的属性(非原型的属性),结果为属性构成的数组const ownKeys = Reflect.ownKeys(target);// 若访问的是目标数据本身的属性if (ownKeys.includes(key)) {// 更新视图updateView();}const result = Reflect.get(target, key, receiver);// 递归调用,实现深度监听(与vue2相比提升了性能,因为只在属性被访问时,才触发深度监听,属性没被访问时,不会被监听)return reactive(result);},// 修改属性 -- target 目标数据,key 属性 ,value 新的属性值, receiver 处理后的数据(即objProxy)set(target, key, value, receiver) {// 如果新的属性值与原属性值相同,则无需处理,直接返回if (val === target[key]) {return true;}// 提取出目标数据本身的属性(非原型的属性),结果为属性构成的数组const ownKeys = Reflect.ownKeys(target);// 若修改的是目标数据本身的属性if (ownKeys.includes(key)) {// 更新视图updateView();}// 新增的属性else {// 更新视图(新增的属性,可能更新视图的逻辑不一样)updateView2();}const result = Reflect.set(target, key, value, receiver); // 如果属性只读,则返回 false。如 object.defineProperty writable falsereturn result;},// 删除属性deleteProperty(target, key) {const result = Reflect.deleteProperty(target, key); // 如果用 delete target[key] ,则返回结果永远都是 true ,而且不是规范的函数式写法// 删除属性成功if (result) {// 更新视图updateView();}return result;},};//通过 Proxy 给目标数据添加响应式const observed = new Proxy(target, proxyConfig);return observed;
}// 测试数据
const data = {name: "朝阳",age: 35,info: {address: "成都", // 需要深度监听},nums: [10, 20, 30], // 需要深度监听
};// 得到响应式数据
const proxyData = reactive(data);

【了解即可】为什么要使用 Reflect ?

  • Reflect 的 API 和 Proxy 的 API 相同,让代码更协调一致
  • Reflect 能让编程规范化、标准化、函数式
Reflect.has(target, key)
key in targetReflect.deleteProperty(target, key)
delete target[key]
  • Reflect 会替代掉 Object 上的工具函数
Reflect.ownKeys({a: 100})
Object.getOwnPropertyNames({a: 100})

Proxy 的优势

与 vue2 的 Object.defineProperty 相比

  • 性能更好 (在访问属性时触发监听,若未访问,则不会监听)
  • 可监听属性的新增和删除
  • 可监听数组的变化

Proxy 的缺点

  • 无法兼容所有浏览器
  • 无法 polyfill

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

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

相关文章

重新下载 ant design pronp

一、项目重建 要删除前端代码并 重新下载Ant Design Pro,您可以按照以下步骤操作: 删除项目文件夹:找到您的Ant Design Pro项目文件夹,将其完全删除。清除npm缓存:在命令行中运行npm cache clean --force以清除npm的缓…

1.python爬虫爬取视频网站的视频可下载的源url

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一、爬取的源网站二、实现代码总结 一、爬取的源网站 http://www.lzizy9.com/ 在这里以电影片栏下的动作片为例来爬取。 可以看到视频有多页,因此需要…

XYCTF2024 RE ez unity 复现

dll依然有加壳 但是这次global-metadata.dat也加密了,原工具没办法用了,不过依然是可以修复的 a. 法一:frida-il2cpp-bridge 可以用frida-il2cpp-bridge GitHub - vfsfitvnm/frida-il2cpp-bridge: A Frida module to dump, trace or hijac…

Anaconda的环境快速迁移(目前windows,未来更新linux)

摘要: 日常办公经常需要在新机器上部署运行环境并进行代码调试,尤其是在AI迅速发展的今天,python已经成为了强有力的AI领域编程语言之一。为了方便对不同windows下python代码工程进行快速部署。本文主要从工具环境的安装、原环境的快速打包、…

数组操作push、pop、shift、unshift操作

这四个都是用来操作数组的,用于插入和删除元素 成对来说 push、pop都是从数组尾部操作(你看p开头的,就记住屁股就行了),分别是插入和弹出 let array [1,2,3,4,5,6] array.push(7) // 7 array // [1,2,3,4,5,6,7]push操作,数组从尾部插入,返回插入后数组的个数,改变了原数组…

【计算机毕业设计】基于SpringBoot+Vue智能停车计费系统设计与实现

目录 一、项目介绍 二、项目主要技术 三、系统功能结构设计 四、系统详细功能的实现 4.1 前台功能实现 4.2 管理员模块实现 4.3 用户后台模块实现 五、实现代码 一、项目介绍 该系统采用了java技术、SpringBoot 框架,连接MySQL数据库,具有较高…

代码随想录算法训练营第四十一天

昨天是摸鱼的一天&#xff0c;不过把电脑换了个位置&#xff0c;今天努力完成两天的任务&#xff0c;就可以玩啦&#xff01;&#xff01;加油&#xff01; 343. 整数拆分 我写的其实有点解释不通dp[0]和dp[1] class Solution { public:int integerBreak(int n) {vector<in…

Python queue使用方法

在Python中&#xff0c;queue 是一个提供线程安全队列操作的模块&#xff0c;它支持多种类型的队列&#xff0c;包括先进先出&#xff08;FIFO&#xff09;和后进先出&#xff08;LIFO&#xff09;。以下是如何使用 Python queue 模块的一些基本示例&#xff1a; 安装 通常情…

Flutter分模块开发、模块可单独启动、包含Provider

前言 目前Flutter都是在一个项目中&#xff0c;创建不同目录进行模块开发&#xff0c;我进行Android原生开发时&#xff0c;发现原生端&#xff0c;是可以将每个模块独立运行起来的&#xff0c;灵感来自这&#xff1b; 折腾了几天&#xff0c;终于给整出来了。 1、创建根目录…

QT7_视频知识点笔记_1_ 基础知识(帮助文档),窗口(内存回收机制),信号槽(传参),Lambda表达式

1.QT基础 QT是一个框架&#xff0c;不用像C语言自己从底层写&#xff0c;需要的功能可以先看是否QT库中有直接可使用的 帮助文档的使用&#xff1a;F1跳入帮助文档&#xff0c; QT中常用的类&#xff1a;比如QPushbutton&#xff0c;查看帮助文档则可知道对应的函数和解决方…

Node.js爬虫在租房信息监测与分析中的应用

在当今数字化时代&#xff0c;房地产市场的信息变化迅速&#xff0c;租房信息的获取和分析对于租房者和房东都至关重要。随着互联网技术的发展&#xff0c;利用爬虫技术来监测和分析租房信息已成为一种常见的做法。本文将探讨如何利用Node.js爬虫在租房信息监测与分析中的应用前…

我独自升级:崛起怎么下载 我独自升级游戏下载教程分享

定于5月8日全球揭幕的《我独自升级崛起》——一款扣人心弦的动作RPG巨制&#xff0c;灵感采撷于同名动画及网络漫画的热潮&#xff0c;誓将引领满怀热忱的玩家步入一场交织着深邃探索和宏大规模的奇妙冒险。该游戏立足于一个独树一帜的网络武侠宇宙&#xff0c;细腻刻画了一个凡…

git lfs的使用

git lfs的使用 git lfs install git lfs track "*.map4"git add ..gitattributes git add . git lfs ls-files详情看:https://zhuanlan.zhihu.com/p/146683392

学华为沟通,汇总5大项目沟通技巧

高效沟通在项目管理中的重要性不容小觑&#xff0c;它是确保项目顺利进行、提升团队协作效率、实现项目目标的关键因素。如果沟通不畅&#xff0c;往往容易导致成员对项目目标理解不一致&#xff0c;或信息传递不及时不准确&#xff0c;导致项目工作方向偏差&#xff0c;增加项…

什么是DMA? STM32如何配置DMA?

您好&#xff0c;我们一些喜欢嵌入式的朋友一起建立的一个技术交流平台&#xff0c;本着大家一起互相学习的心态而建立&#xff0c;不太成熟&#xff0c;希望志同道合的朋友一起来&#xff0c;抱歉打扰您了QQ群372991598 一、DMA简介 1、DMA简介 DMA(Direct Memory Access&a…

[Collection与数据结构] 七大排序算法汇总

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏:&#x1f355; Collection与数据结构 (90平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 &#x1f9c0;Java …

Python查询PostgreSQL数据库

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; Python与PostgreSQL的连接 需要了解如何在Python中连接到PostgreSQL数据库。这通常涉及到使用一个库&#xff0c;如psycopg2&#xff0c;它是Python中用于PostgreSQL的最流行的适配器。安装psycopg2非常简单&#x…

好用的win10电脑桌面便利贴,桌面便签小工具

在日常办公中&#xff0c;我们经常需要记录重要事项、提醒任务或者临时想法。这时&#xff0c;一款好用的电脑桌面便签或便利贴小工具就显得尤为重要。它们能够帮助我们高效地管理信息&#xff0c;提升工作效率。 那么好用的win10电脑桌面便利贴是哪个呢&#xff1f;电脑桌面便…

oracle 8i系统检查

oracle 8i系统检查 set echo on spool d:\bk\1.txt select sysdate from dual; --版本信息 select * from v$version; --安装的产品 col PARAMETER for a50; col value for a10; select * from v$option order by 2; --用户信息 set linesize 100 set pagesize 100 COL USE…

SpringBoot集成阿里云短信验证码服务

一&#xff1a;前言 最近在项目开发过程中&#xff0c;需要去写一个发送手机短信验证码的功能。在网上查了一下&#xff0c;有很多服务器可供选择&#xff0c;本文的话是基于阿里云服务的短信验证码功能实现。 关于注册和开通服务这些需要操作的&#xff0c;请各位小伙伴参考官…