object的defineProperty与Proxy对比

news2024/11/24 4:27:13

Object.defineProperty

循环执行Object.defineProperty方法遍历对象的每一个属性,给每一个属性增加get和set方法,使得我们在读取和设置属性值的时候都会被Vue给监听到,从而去做一些其他的操作。
代码示例:

let obj = {
    a:1,
    b:2,
    c:{
        d:3,
        e:4,
        f:{
            g:6
        }
    }
}
function observe(obj){
 for(const k in obj){
    let v = obj[k]
    if(isObject(v)){
        observe(v)
    }
    Object.defineProperty(obj,k,{
        get(){
            console.log('读取了属性',k)
            return v
        },
        set(val){
            if(val !== v){
                console.log(`设置了属性${k}`,val)
                v = val
            }
        }
    })
 }
}
function isObject(v){
   return typeof v == 'object' && v !== null
}
observe(obj)
let v = obj.c.d
obj.a =3

输出结果:
在这里插入图片描述

Proxy

Proxy 对象来拦截对对象属性的访问和修改操作。通过 Proxy 的 get 和 set 方法, 可以监控属性的读取和写入,并进行相应的更新
代码示例:

let obj = {
    a: 1,
    b: 2,
    c: {
        d: 3,
        e: 4,
        f: {
            g: 6
        }
    }
}
function observe(obj) {
    const proxy = new Proxy(obj, {
        get(target, k) {
            let v = target[k]
            if (isObject(v)) {
                v = observe(v)
            }
            console.log('读取了', k)
            return v
        },
        set(target, k, val) {
            if (target[k] !== val) {
                console.log('设置了值', val)
                target[k] = val
            }
        }
    })
    return proxy
}
function isObject(v) {
    return typeof v == 'object' && v !== null
}
let proxy = observe(obj)
proxy.a = 3
proxy.c.f.g
proxy.c.f.g = 9
proxy.VV   //没有的属性依旧可以监听的到

输出结果:
在这里插入图片描述

总结

1.Proxy的效率比Object.defineProperty高,原因是Object.defineProperty需要递归遍历对象的每一个属性设置set和get,而Proxy只有用到了这个属性才会深度遍历寻找。
2.Proxy对于新增的属性也可以读取,而Object.defineProperty只在对象创建时生成属性的set和get,对于新增的属性无法做到监听。

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

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

相关文章

善于运用facebook自动化规则,将节省你50%的时间

许多facebook广告投手都会花大量时间在盯盘看数据上,从而导致没有太多时间和精力去做广告素材的优化,其实常规的一些数据盯盘都可以交给facebook自动化规则,包括增减预算,暂停广告等,合理运用自动化规则,可…

前端必知必会-html表单元素

文章目录 HTML 表单元素HTML <form> 元素<input> 元素<label> 元素<select> 元素<option> 元素定义一个可选择的选项。<textarea> 元素<button> 元素<fieldset> 和 <legend> 元素<datalist> 元素<output> 元…

Aker ASA引领行业变革,旗下互联网投融资平台重磅起航

全球领先的海洋科技公司 Aker ASA 正式宣布,将于近期推出其全新的互联网海洋产业投融资平台。这一平台的推出标志着Aker ASA在海洋资源开发和投融资领域的又一重大进展,旨在为投资者提供创新、可靠的投资机会,同时推动海洋产业的可持续发展。 Aker ASA 作为行业内的领导者,以其…

开源AI智能名片O2O商城微信小程序在顾客价值链优化中的应用与探索

摘要&#xff1a;随着信息技术的飞速发展&#xff0c;顾客的消费行为模式正经历着前所未有的变革。在这一背景下&#xff0c;开源AI智能名片O2O商城微信小程序作为一种创新的营销与服务平台&#xff0c;正逐步成为企业连接顾客、优化顾客价值链的重要工具。本文旨在探讨开源AI智…

【IEEE出版】第五届大数据、人工智能与软件工程国际研讨会(ICBASE 2024,9月20-22)

第五届大数据、人工智能与软件工程国际研讨会&#xff08;ICBASE 2024&#xff09;将于2024年09月20-22日在中国温州隆重举行。 会议主要围绕大数据、人工智能与软件工程等研究领域展开讨论。会议旨在为从事大数据、人工智能与软件工程研究的专家学者、工程技术人员、技术研发人…

Echarts 横向条形图的右侧标签靠右显示对齐,不被遮挡

解决方案&#xff1a; 再添加一个y轴&#xff0c;隐藏刻度线即可。 配置如下&#xff1a; 在这里插入代码片yAxis: [{type: category,axisLine: {lineStyle: {color: #EFEFEF, // 轴线颜色width: 1, // 轴线线宽type: solid // 轴线线条类型&#xff0c;可选为 solid、dashed…

<数据集>遥感航拍船舶识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;17575张 标注数量(xml文件个数)&#xff1a;17575 标注数量(txt文件个数)&#xff1a;17575 标注类别数&#xff1a;1 标注类别名称&#xff1a;[ship] 使用标注工具&#xff1a;labelImg 标注规则&#xff1a;对…

Python文献调研(四)QtDesigner的布局

一、新建项目&#xff1a; 1.打开pycharm&#xff0c;新建一个Python项目 &#xff08;1&#xff09;右键项目列表区&#xff0c;找到我们之前配置好的外部工具&#xff0c;点击Pyside6 QtDesigner 打开Qt Designer后会是这个界面&#xff1a; &#xff08;2&#xff09;此时…

XC8403B 30V降压芯片 耐压可达38V 适用24V降压 12V降压电路 3A大电流 替代RY8336

XC8403B是一款采用内部功率MOSFET的高频、同步、整流、降压、开关式转换器。XC8403 B提供不同频率和FB版本&#xff0c;可根据不同的应用进行选择。它提供了一种非常紧凑的解决方案&#xff0c;可以在很宽的输入电源范围内提供3A的连续输出电流&#xff0c;具有出色的负载和线路…

自动更换apk包名源码

系统通过对apk反编译&#xff0c;随机包名&#xff0c;随机签名&#xff0c;混淆代码等方式&#xff0c;回编译生成新的apk安装包通过系统智能自动处理&#xff0c;间隔5分钟&#xff08;可以自定义时间&#xff09;生成一个新包&#xff0c;通过对接对象云储存系统分发给不同的…

电力能源监控的未来技术趋势如何

电力能源监控的未来技术趋势是一个多元化且快速发展的领域&#xff0c;它涵盖了智能化、数字化、集成化以及可持续发展等多个方面。以下是对电力能源监控未来技术趋势的详细分析&#xff1a; 一、智能化与数字化 1、人工智能&#xff08;AI&#xff09;与机器学习&#xff1a…

手把手教你开发无人带货直播插件!

在当今这个数字化时代&#xff0c;直播带货已成为电商领域的一股不可忽视的力量&#xff0c;然而&#xff0c;随着市场竞争的加剧和消费者需求的多样化&#xff0c;如何高效、低成本地进行直播带货成为许多商家关注的焦点。 无人带货直播插件应运而生&#xff0c;它不仅降低了…

SpringBoot中华非遗传承网站-计算机毕设定制-附项目源码(可白嫖)48408

摘 要 非物质文化遗产是人类智慧活动的结晶&#xff0c;具有极高的文化价值&#xff0c;是一个民族历史文化的时间遗迹。我国拥有三千多年的历史文明&#xff0c;在非物质文化遗产的数量和质量上&#xff0c;在世界当中都是首屈一指的。根据有关数据显示&#xff0c;我国非物质…

【网络世界】传输层协议

&#x1f308;前言&#x1f308; 欢迎收看本期【网络世界】&#xff0c;本期内容讲解TCP/IP协议栈中的传输层协议&#xff0c;即UDP协议和TCP协议。包含了他们的协议格式&#xff0c;特点等。介绍他们的应用场景&#xff0c;最后对比TCP与UDP协议。此外&#xff0c;还将介绍套接…

台州网站建设实施方案

随着信息技术的不断发展&#xff0c;网站建设已成为企业发展的重要手段之一。台州作为一个经济发达的城市&#xff0c;网站建设已经成为提升企业形象、拓展市场、服务客户的重要途径。因此&#xff0c;台州网站建设实施方案显得尤为重要。 首先&#xff0c;台州网站建设实施方案…

学习记录2024年7月31日 编码器的参数:脉宽,电压输出、分辨率

一、编码器的脉宽&#xff0c;指的是脉冲信号高电平的持续时间。 对于方波信号来说&#xff0c;就是高电平的持续时间。 占空比&#xff0c;就是单个周期内&#xff0c;比如100Hz的信号&#xff0c;脉宽/周期时间占空比。 若脉宽是5ms&#xff0c;周期时间是10ms。占空比5ms…

pgvector: 30 倍构建向量嵌入索引

使用 pgvector 为 HNSW 并行构建索引 Postgres 最受欢迎的向量搜索扩展 pgvector 最近实现了并行索引构建功能&#xff0c;这将分层可导航小世界 (HNSW) 索引构建时间显著提高了 30 倍。 祝贺 Andrew Kane 和 pgvector 的贡献者发布此版本&#xff0c;这巩固了 Postgres 作为最…

通过知识管理提升财务卓越性

通过准确共享关键信息来降低运营风险、提高生产力并提高客户满意度。 Baklib 能为您提供什么帮助&#xff1f; 知识传输 无缝的知识转移可以让您的内部团队随时了解最新情况。这将帮助您的团队提高日常运营效率。 决策 对于每个银行或金融机构来说&#xff0c;决策都非常…

多任务协程处理的流程,看看是否和你想像的一样

import time import asyncioasync def func1():print("你好&#xff0c;我是第一个任务")await asyncio.sleep(3)print("你好&#xff0c;我是第二个任务")async def func2():print("你好&#xff0c;我是第3个任务")await asyncio.sleep(2)…

江科大/江协科技 STM32学习笔记P16

文章目录 一、PWM驱动LED呼吸灯1、打通PWM通路2、PWM.cTIM外设对应的库函数参考手册AFIO引脚重映射表 3、main.c 二、PWM驱动舵机1、PWM.c2、main.c3、Servo.c 三、PWM驱动直流电机1、Motor.c2、PWM.c3、main.c 一、PWM驱动LED呼吸灯 1、打通PWM通路 打通PWM通路&#xff0c;第…