前端每日一练:vue3 为什么要用 proxy 替换 Object.defineproperty ?为什么只对对象劫持,而要对数组进行方法重写?

vue3 为什么要用 proxy 替换 Object.defineproperty ?

  • Vue 3 在设计上选择使用 Proxy 替代 Object.defineProperty 主要是为了提供更好的响应性和性能。​
  • Object.defineProperty 是在 ES5 中引入的属性定义方法,用于对对象的属性进行劫持和拦截。Vue 2.x 使用 Object.defineProperty 来实现对数据的劫持,从而实现响应式数据的更新和依赖追踪。​
  • Object.defineProperty 只能对已经存在的属性进行劫持,无法拦截新增的属性和删除的属性。这就意味着在 Vue 2.x 中,当你添加或删除属性时,需要使用特定的方法(Vue.set 和 Vue.delete)来通知 Vue 响应式系统进行更新。这种限制增加了开发的复杂性。​
  • Object.defineProperty 的劫持是基于属性级别的,也就是说每个属性都需要被劫持。这对于大规模的对象或数组来说,每次都需要深度递归进行响应劫持,会导致性能下降。因为每个属性都需要添加劫持逻辑,这会增加内存消耗和初始化时间。​
  • 相比之下,Proxy 是 ES6 中引入的元编程特性,可以对整个对象进行拦截和代理。Proxy 提供了更强大和灵活的拦截能力,可以拦截对象的读取、赋值、删除等操作。Vue 3.x 利用 Proxy 的特性,可以更方便地实现响应式系统。​
  • 使用 Proxy 可以解决 Object.defineProperty 的限制问题。它可以直接拦截对象的读取和赋值操作,无需在每个属性上进行劫持。这样就消除了属性级别的劫持开销,提高了初始化性能。另外,Proxy 还可以拦截新增属性和删除属性的操作,使得响应式系统更加完备和自动化。
  • Vue 3 中使用 Proxy 初始化时只对通过 get 访问到的属性进行响应式处理。这是一种优化策略,也被称为"懒代理"或"懒观察",它有助于提高性能并减少不必要的代理操作。

具体来说,当你通过 get 访问对象的属性时,Vue 3 会检查该属性是否已经是响应式的,如果不是,它会在这个时候进行代理,以确保后续对该属性的访问和修改都能够触发相应的响应式更新。这个懒代理的策略有助于避免不必要的性能开销。在初始化时,不是所有的属性都一定会被访问,因此只对实际被访问到的属性进行代理,而不是对整个对象进行一次性的全面代理。这种方式有效地减少了初始渲染时的不必要计算和性能开销。需要注意的是,如果你希望在对象创建时就代理所有属性,可以使用 reactive 函数,它会递归地代理整个对象。但在许多情况下,懒代理的方式是更加高效和合理的选择。 

//Proxy实现数据劫持observe(data) {const that = this;let handler = {get(target, property) {return target[property];},set(target, key, value) {let res = Reflect.set(target, key, value);that.subscribe[key].map(item => {item.update();});return res;}}this.$data = new Proxy(data, handler);
}

 

为什么只对对象劫持,而要对数组进行方法重写?

因为对象最多也就几十个属性,拦截起来数量不多,但是数组可能会有几百几千项,拦截起来非常耗性能,所以直接重写数组原型上的方法,是比较节省性能的方案

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

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

相关文章

更快更强,Claude 3全面超越GPT4,能归纳15万单词

ChatGPT4和Gemini Ultra被Claude 3 AI模型超越了? 3月4日周一,人工智能公司Anthropic推出了Claude 3系列AI模型和新型聊天机器人,其中包括Opus、Sonnet和Haiku三种模型,该公司声称,这是迄今为止它们开发的最快速、最强…

.NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例

在本文中,我们将详细介绍.NET Core日志内容,包括不同日志级别的区别,以及一些常用的日志记录实用工具和第三方库。同时,我们还将通过示例来展示如何使用这些工具和库。 一、.NET Core日志级别 .NET Core日志系统提供了五种日志级…

Linux系统——SElinux

目录 前言 一、SELinux 的作用及权限管理机制 1.SELinux 的作用 1.1DAC 1.2MAC 1.3DAC 和 MAC 的对比 2.SELinux 基本概念 2.1主体(Subject) 2.2对象(Object) 2.3政策和规则(Policy & Rule)…

Nginx+Tomcat实现负载均衡动静分离

目录 一、背景与环境 1. 背景 2. 环境图示 3. 目标 二、操作过程 1. 第一层 2. 第二层 一、背景与环境 1. 背景 在一个Web应用程序中,通常会将动态内容(由Tomcat处理)与静态内容(如图片、CSS、JavaScript文件等&#xff…

什么是5G边缘计算网关?

随着5G技术的飞速发展和普及,边缘计算作为5G时代的关键技术之一,正日益受到业界的关注。而5G边缘计算网关,作为连接5G网络和边缘计算节点的桥梁,扮演着至关重要的角色。HiWoo Box,作为一款卓越的5G边缘计算网关&#x…

springcloud:3.5测试慢调用熔断降级

服务提供者【test-provider8001】 Openfeign远程调用服务提供者搭建 文章地址http://t.csdnimg.cn/06iz8 相关接口 测试远程调用:http://localhost:8001/payment/index 服务消费者【test-consumer-resilience4j8004】 Openfeign远程调用消费者搭建 文章地址http://t…

Unity3D Netty网络框架的使用详解与原理详解

前言 Unity3D是一款强大的跨平台游戏开发引擎,而Netty是一个高性能、异步事件驱动的网络应用框架。结合使用Unity3D和Netty可以实现网络游戏的开发,实现客户端和服务器端之间的通信。本文将详细介绍Unity3D和Netty的使用方法和原理,以及如何…

学习大数据,所必需的java基础(8)

文章目录 字符缓冲流字符缓冲输出流 _Buffered和Writer字符缓冲输入流字符缓冲流练习 转换流字符编码字符集转换流转换流_OutputStreamWriter序列流和反序列流的介绍序列化流_ObjectOutputStream反序列化_ObjectInputStream不想被序列化操作反序列化时出现的问题以及分析和解决…

解决:hive数据库初始失败

1、背景 采用Mysql数据库保存hive元数据时,我们一般是这样操作: 启动mysql服务;用mysql新建一个库(比如库名为"hive“,这个“hive”与hive-site.xml中的local:3306/hive的“hive”对应,是用来保存hiv…

滴滴基于 Clickhouse 构建新一代日志存储系统

ClickHouse 是2016年开源的用于实时数据分析的一款高性能列式分布式数据库,支持向量化计算引擎、多核并行计算、高压缩比等功能,在分析型数据库中单表查询速度是最快的。2020年开始在滴滴内部大规模地推广和应用,服务网约车和日志检索等核心平…

SkyWalking 本地启动以及闪退问题

1. 下载包 Downloads | Apache SkyWalking SkyWalking APM包含OAP和UI Java Agent 就是Java 的探针 2. 运行 UI 默认端口是 8080, OAP 默认端口是 11800(grpc)12800(http) 如果占用可以修改配置文件 UI 项目的配…

MySQL和Redis Common Command

Ubuntu 配置 MySQL 下载对应版本的deb包并解压,用不到test可删除,wegt或者直接去镜像网站下载均可 tar xvf mysql-server_5.7.37-1ubuntu18.04_amd64.deb-bundle.tar -C /mnt/d/opt/mysql-debrm -f mysql-community-test_5.7.37-1ubuntu18.04_amd64.deb…

Verdi VC Apps Batch mode 使用

Verdi VC Apps除了能在Verdi gui中启动之外,其实还可以使用batch mode. 下面我简单介绍一下如何使用: $VERDI_HOME/share/VIA/Apps/Bin/ 目录下有各个Apps对应的perl脚本,我们使用该脚本来启动batch mode. 以listRegisters.pl 为例&#xf…

LVS 负载均衡部署的三种模式 与搭建dr模式具体步骤

一 LVS 负载均衡部署的模式 LVS 有三种负载均衡的模式,分别是VS/NAT(nat 模式)、VS/DR(路由模式)、VS/TUN(隧道模式)。 (一)三种模式原理 及优缺点 1,nat 模式 1.1 原理 原理:首先负载均衡器接收到客户的请求数据包时&am…

【HTML/CSS学习】CSS常见选择器

CSS(层叠样式表)中有许多常见的选择器,它们用于选择要应用样式的HTML元素。以下是一些常见的CSS选择器: 1. 元素选择器(Element Selector) 选择所有指定类型的HTML元素。 p {/* 样式规则 */ }2. 类选择器…

GPT-4技术解析:与Claude3、Gemini、Sora的技术差异与优势对比

【最新增加Claude3、Gemini、Sora、GPTs讲解及AI领域中的集中大模型的最新技术】 2023年随着OpenAI开发者大会的召开,最重磅更新当属GPTs,多模态API,未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义,不亚…

b站小土堆pytorch学习记录—— P18-P22 神经网络+小实战

文章目录 一、卷积层 P181.卷积操作2.代码 二、池化层 P191.池化层简单介绍2.代码(1)池化操作中数字的变化(2)池化操作对图片的影响 三、非线性激活 P201.简要介绍2.代码 四、线性层及其他层介绍 P211.线性层2.代码 五、搭建小实战…

Conda快速安装的解决方法(Mamba安装)

如果你的Conda安装了,你可能会发现一个问题,就是使用Conda install 安装某个软件时,会特别慢,这时候呢?你会上网去搜,然后大家解决的方法呢。一是告诉你镜像可以下载快一点,二是,Mam…

基于逻辑回归实现乳腺癌预测(机械学习与大数据)

基于逻辑回归实现乳腺癌预测 将乳腺癌数据集拆分成训练集和测试集,搭建一个逻辑回归模型,对训练集进行训练,然后分别对训练集和测试集进行预测。输出以下结果: 该模型在训练集上的准确率,在测试集上的准确率、召回率和…