Vue3的proxy

        vue3.0中,使用proxy替换了原来遍历对象使用Object.defineProperty方法给属性添加set/get
   vue的核心能力之一是监听用户定义的状态变化并响应式刷新DOM
     vue2是通过替换状态对象属性的getter和setter来实现的,vue3则通过proxy进行
     改为proxy后,可以突破vue当前的限制,解决之前vue2的无法监听新增属性,还能提供更好的性能表现

vue的新版本(和重写版本)出现有两个关键的因素:
    主流浏览器对新的JavaScript语言特性的普遍可用性
    随着时间的推移,当前代码库中的设计和架构问题逐渐暴露


什么是proxy


proxy->代理,JavaScript中用来表示由它来’代理’某些操作
proxy会在目标对象之前架设一层’拦截’,外界对该对象的访问,都必须先通过这层拦截,因此可以对外界的访问进行过滤和改写


vue3为什么要用proxy


      在vue2中,通过递归遍历data中的所有的property,并使用Object.defineProperty把property全部转为getter/setter,在getter中做数据依赖收集处理,在setter中监听数据的变化,并通知订阅当前数据的地方,但由于JavaScript的限制,这种实现方式有几个问题:

无法检测对象属性的添加和移除,需要通过Vue.set/Vue.delete来保证响应系统的运行符合预期;
无法监控到数组下标及数组长度的变化,当直接通过数组的下标给数组设置值或者改变数组长度时,不能实时响应;
性能问题,当data中数据比较多且层级很深的时候,因为要遍历data中所有数据并给其设置响应式,会导致性能下降;而proxy恰恰解决了上述问题

总结

proxy是用来操作对象并且扩展对象能力的,而Object.defineProperty只是单纯地操作对象的属性

 vue2是用Object.defineProperty实现数据响应的,但是受限于Object.defineProperty的实现,必须递归遍历至对象的最底层

vue3用proxy来拦截对象,不管是对对象执行任何操作,都会先通过proxy的处理逻辑

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

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

相关文章

面向对象的五大基本原则

一、单一职责原则 一个类,最好只做一件事,只有一个引起它的变化。单一职责原则可以看做是低耦合、高内聚在面向对象原则上的引申,将职责定义为引起变化的原因,以提高内聚性来减少引起变化的原因。 二、开放封闭原则 软件实体应…

2312d,d的10月会议

原文 拉兹万 Razvan从他最近在内联中遇见的一个问题开始,他不知道如何解决.一般,当A模块导入B模块并从B调用函数时,如果B的目标文件没有传递给链接器,则最终会出现链接器错误. 如,在命令行上使用A.d编译并省略B.d时.但是,当内联调用函数时,则不会触发链接器错误.他怀疑这是一…

LVS那点事

LVS 原理 IPVS LVS 的 IP 负载均衡技术是通过 IPVS 模块来实现的,IPVS 是 LVS 集群系统的核心软件,它的主要作用是:安装在 Director Server 上,同时在 Director Server 上虚拟出一个 IP 地址,用户必须通过这个虚拟的…

数据挖掘与知识发现:解析关键概念

目录 1. 引言 1.1 背景 1.2 意义与应用 2. 数据挖掘的基本概念 2.1 定义与范畴 2.1.1 数据挖掘的定义 2.1.2 数据挖掘的范畴 2.2 数据挖掘过程 2.2.1 问题定义 2.2.2 数据采集与清洗 2.2.3 特征选择 2.2.4 模型构建 2.2.5 模型评估与验证 2.2.6 模型部署 2.3 数…

【ROS2】MOMO的鱼香ROS2(二)ROS2入门篇——ROS2初体验

ROS2初体验 引言专业术语认识1 认识ROS21.1 ROS2版本对照表1.2 ROS与ROS2对比1.3 ROS2架构1.3.1 DDS实现层1.3.2 ROS中间件接口(RMW)1.3.3 ROS2客户端库 RCL 2 安装ROS22.1 ROS安装(一键式)2.2 手动安装ROS22.2.1 添加ROS软件源2.…

电商大数据商品采集:阿里巴巴1688电商网站货源产品信息采集

商品详情大数据采集:阿里巴巴1688电商网站货源产品信息采集 ------------- 数据采集满足多种业务场景:适合产品、运营、销售、数据分析、政府机关、电商从业者、学术研究等多种身份 职业。 舆情监控:全方位监测公开信息,抢先获取舆论趋势。 市…

MP4容器结构英文缩写及英文全称(box结构、atom结构、MP4结构)

文章目录 MP4容器结构 参考文章:详解视频封装格式之MP4 MP4容器结构 MP4文件格式是一个复杂的层级结构,下面列出了一些常见的容器及其英文全称和中文标注,方便查阅: ftyp (File Type Box):文件类型盒子moov (Movie B…

java虚拟机内存管理

文章目录 概要一、jdk7与jdk8内存结构的差异二、程序计数器三、虚拟机栈3.1 什么是虚拟机栈3.2 什么是栈帧3.3 栈帧的组成 四、本地方法栈五、堆5.1 堆的特点5.2 堆的结构5.3 堆的参数配置 六、方法区6.1 方法区结构6.2 运行时常量池 七、元空间 概要 根据 JVM 规范&#xff0…

工具--Git详解

在当今的数字时代,版本控制系统已成为开发人员和团队之间协作的重要工具。其中,Git是最受欢迎的版本控制系统之一。它不仅在软件开发中广泛使用,还被应用于许多其他领域。在这篇博客中,我们将深入了解Git的工作原理、基本命令以及…

vue对日期的年、月、日进行增加,转换成指定格式的字符串(yyyy-MM-dd)

let date new Date(2023-12-28); //当前日期 let startYear date.getFullYear(); // 年 let startMonth date.getMonth() 1; // 月 年 let addYear 3; date.setFullYear(startYear Number(addYear )); endDate this.formatDate(date); 月 let addMonth 3; let endMonth…

在Spring Cloud中使用Ribbon完成一个简单的负载均衡demo

Spring Cloud系列断更了有一段时间了,这段时间最近都在忙着项目上的事,天天修复bug以及调整需求,反正各种操劳,了解业务需求,然后开发相关功能,很久都没碰Spring Cloud系列的相关文章了,最近回头…

《Linux Nano命令详解:小而强大的文本编辑器》

《Linux Nano命令详解:小而强大的文本编辑器》 引言: 在Linux系统中,文本编辑是开发和系统管理中不可或缺的一部分。虽然有许多强大的文本编辑器可供选择,但Nano以其简单易用、小巧灵活而备受喜爱。本文将深入探讨Nano命令&…

C动态内存分配与释放介绍

介绍 C语言中的动态内存分配与释放主要通过malloc和free这两个函数来实现。 malloc函数: malloc函数用于在程序运行时动态地从堆(heap)中分配一块指定大小的内存空间。其函数原型如下: void* malloc(size_t size);参数&#xff1…

Android 万能的RecyclerView适配器(BaseRecyclerViewAdapterHelper)

引用&#xff1a; implementation "io.github.cymchad:BaseRecyclerViewAdapterHelper4:4.1.2" BaseQuickAdapter 基本使用&#xff1a; 快速使用 class TestAdapter : BaseQuickAdapter<Status, TestAdapter.VH>() {// 自定义ViewHolder类class VH(parent: V…

亲爱的程序猿们,元旦快乐!

新年祝福 在这个充满欢笑和祝福的日子里&#xff0c;我想对你们说&#xff1a; 新的一年&#xff0c;愿你们像代码一样充满逻辑&#xff0c;像算法一样追求高效&#xff0c;像编程语言一样多样化&#xff01; 2024年即将到来&#xff0c;预测几个行业趋势&#xff1a; 人工…

【回溯】0-1背包Python实现

文章目录 [toc]问题描述形式化描述 回溯法时间复杂性Python实现 个人主页&#xff1a;丷从心 系列专栏&#xff1a;回溯法 问题描述 给定 n n n种物品和一背包&#xff0c;物品 i i i的重量是 w i w_{i} wi​&#xff0c;其价值为 v i v_{i} vi​&#xff0c;背包的容量为 c …

Qt基础之四十五:Qt国际化(I18N)

国际化的英文表述为Internationalization,通常简写为I18N(首尾字母加中间的字符数),这种奇葩的缩写方式,让我想起了NBA球星“字母哥”。 下面看下Qt实现的动态语言切换效果。 一.效果 二.源码 QHSettingDialog.h #ifndef QHSETTINGDIALOG_H #define QHSETTINGDIALOG_H#…

Redis(认识NoSQL,认识redis,安装redis,redis桌面客户端,redis常见命令,redis的Java客户端)

文章目录 Redis快速入门1.初识Redis1.1.认识NoSQL1.1.1.结构化与非结构化1.1.2.关联和非关联1.1.3.查询方式1.1.4.事务1.1.5.总结 1.2.认识Redis1.3.安装Redis1.3.1.依赖库1.3.2.上传安装包并解压1.3.3.启动1.3.4.默认启动1.3.5.指定配置启动1.3.6.开机自启 1.4.Redis桌面客户端…

【数据结构】详细剖析线性表

顺序表与链表的比较 导言一、线性表二、线性表的存储结构三、顺序表和链表的相同点四、顺序表与链表之间的差异五、存储结构的选择六、静态顺序表的基本操作七、无头结点单链表的基本操作结语 导言 大家好&#xff0c;很高兴又和大家见面啦&#xff01;&#xff01;&#xff0…

轻量应用服务器与云服务器CVM对比——腾讯云

腾讯云轻量服务器和云服务器CVM该怎么选&#xff1f;不差钱选云服务器CVM&#xff0c;追求性价比选择轻量应用服务器&#xff0c;轻量真优惠呀&#xff0c;活动 https://curl.qcloud.com/oRMoSucP 轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年&#xff0c;540元三…