当前位置: 首页 > news >正文

Vue响应式原理————Object.defineProperty()和proxy的用法分享

     Vue框架一个比较核心的功能就是我们的数据是响应式的,这样我们在修改数据的时候,页面会自动帮我们更新,那么想要实现这个功能就要实现对一个数据的劫持,即在取值和设置值的同时我们能够检测到即数据劫持。vue2响应式的实现原理所依赖的就是Object.defineProperty()这个API,而vue3用的则是proxy今天我就来分享一下这两个api。

一、什么是Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象

二、基本用法

Object.defineProperty(obj, prop, descriptor)
obj表示想要代理的对象
prop表示想要代理对象中的key
descriptor表示代理该对象的一些方法配置
我们在访问一个对象的某个值或者修改一个对象的某个值的时候会触发里边的getter和setter方法

let obj1 = {x: 100}let obj2 = {y: 200}Object.defineProperty(obj2, 'x', {get() {console.log('我读取了');return obj1.x},set(value) {console.log('我设置了');obj1.x = value}})console.log(obj2.x);obj2.x=111

执行结果:
在这里插入图片描述

三、配置对象的一些常见用法

configurable:false不能删除属性:

 let Person = {name:'张三'};Object.defineProperty(Person, "name", {configurable: false,});console.log(delete Person.name);

当 writable 属性设置为 false 时,该属性被称为“不可写的”。它不能被重新赋值

Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>at Function.defineProperty (<anonymous>)

enumerable设置为false定义了对象的属性是否可以在for…of以及for…in语句中枚举
configurable 特性表示对象的属性是否可以被删除,以及除 value 和 writable 特性外的其他特性是否可以被修改。

四、proxy基本用法

let person = {name: '张三',age: 18}
const p = new Proxy(person, {// 第一个参数是代理的对象,第二个参数是读取的属性名// 有人读取p的某个属性时调用get(target, propName) {console.log('有人读取了属性', target, propName);return Reflect.get(target[propName])},// 有人修改p的某个属性时或给p追加某个属性时调用set(target, propName, value) {console.log(`有人修改或新增${propName}属性,我要去修改页面了`);Reflect.set(target, propName, value)},// 有人删除p的某个属性是调用deleteProperty(target, propName) {console.log(`有人删除了属性${propName},我要去修改页面了`);return Reflect.deleteProperty(target, propName)// return delete target[propName]}})

这周也比较匆忙,原本想总结vue2响应式原理和vue3响应式原理的一些比较,但是现在自己了解的还不是很清楚,就先总结一下响应式原理背后所依赖的一些东西吧,等到之后了解清楚了再来分享。

相关文章:

Vue响应式原理————Object.defineProperty()和proxy的用法分享

Vue框架一个比较核心的功能就是我们的数据是响应式的&#xff0c;这样我们在修改数据的时候&#xff0c;页面会自动帮我们更新&#xff0c;那么想要实现这个功能就要实现对一个数据的劫持&#xff0c;即在取值和设置值的同时我们能够检测到即数据劫持。vue2响应式的实现原理所依…...

CSDN 编程竞赛三十四期题解

竞赛总览 CSDN 编程竞赛三十四期&#xff1a;比赛详情 (csdn.net) 本期的题目和第三十一期竞赛的题目竟然高度重合&#xff0c;真不知道该写点什么了。 不过&#xff0c;上次那道测试数据有bug的题已经修复了&#xff0c;答题过程挺顺利的&#xff0c;没有遇到新的问题。 竞…...

C#教程06 运算符

文章目录 一、算术运算符加法运算符(+)减法运算符(-)乘法运算符(*)除法运算符(/)二、逻辑运算符与运算符(&&)或运算符(||)非运算符(!)三、比较运算符等于运算符(==)大于运算符(>)小于运算符(<)大于等于运算符(>=)小于等于运算符(<=…...

软测入门(六)pytest单元测试

pytest pytest是python的一种单元测试框架&#xff0c;同自带的unit test测试框架类似&#xff0c;但pytest更简洁高效。 单元测试&#xff1a; 测试 函数、类、方法能不能正常运行测试的结果是否符合我们的预期结果 安装 pip install -U pytest基本使用 通过pytest包使用…...

经典分类模型回顾5—DenseNet实现图像分类(matlab)

DenseNet&#xff0c;全称为Densely Connected Convolutional Networks&#xff0c;中文名为密集连接卷积网络&#xff0c;是由李沐等人在2017年提出的一种深度神经网络架构。 DenseNet旨在解决深度神经网络中的梯度消失问题和参数数量过多的问题&#xff0c;通过构建密集连接…...

基于flask+bootstrap+echarts+mysql的鱼村小馆订餐后台管理系统

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…...

Spark使用Log4j将日志发送到Kafka

文章目录自定义KafkaAppender修改log4j.properties配置启动命令配置添加参数启动之后可以在Kafka中查询发送数据时区问题-自定义实现JSONLayout解决自定义JSONLayout.java一键应用可能遇到的异常ClassNotFoundException: xxx.KafkaLog4jAppenderUnexpected problem occured dur…...

c++类与对象整理(上)

目录 1.类的引入 2.类的定义 3.类的访问限定符及封装 1&#xff09;访问限定符 2&#xff09;封装 4.类的作用域 5.类的实例化 6.类的对象大小的计算 1&#xff09;类对象的存储方式 2&#xff09;内存对齐和大小计算 ​编辑 7.类成员函数的this指针 1&#xff09…...

Docker学习(十九)什么是镜像的元数据?

在 Docker 中&#xff0c;镜像的元数据是指与镜像相关的所有信息&#xff0c;包括镜像的名称和标签、作者、描述、创建日期、环境变量、命令等。这些信息都是通过 Dockerfile 或命令行创建和指定的。 镜像的元数据被存储在 Docker Registry 中&#xff0c;并在使用 docker pull…...

Python如何获取弹幕?给你介绍两种方式

前言 弹幕可以给观众一种“实时互动”的错觉&#xff0c;虽然不同弹幕的发送时间有所区别&#xff0c;但是其只会在视频中特定的一个时间点出现&#xff0c;因此在相同时刻发送的弹幕基本上也具有相同的主题&#xff0c;在参与评论时就会有与其他观众同时评论的错觉。 在国内…...

JAVA- AOP 面向切面编程 Aspect切面工具类 记录特定方法执行时的入参、执行时间、返参等内容

背景&#xff1a;JAVA项目&#xff0c;使用AOP对指定函数进行切面。能够记录特定方法执行时的入参、执行时间、返参结果等内容。 文章目录1、自定义注解类1.1 Target1.2 Retention2、Aspect切面工具2.1 JointPoint2.2 Pointcut2.3 切面中的相关注解3、同一个类里调用AOP4、其他…...

「史上最全的 TCG 规范解读」TCG 规范架构概述(下)

可信计算组织&#xff08;Ttrusted Computing Group,TCG&#xff09;是一个非盈利的工业标准组织&#xff0c;它的宗旨是加强不同计算机平台上计算环境的安全性。TCG 于 2003 年春成立&#xff0c;并采纳了由可信计算平台联盟&#xff08;the Trusted Computing Platform Allia…...

GDScript 导出变量 (4.0)

概述 导出变量的功能在3.x版本中也是有的&#xff0c;但是4.0版本对其进行了语法上的改进。 导出变量在日常的游戏制作中提供节点的自定义参数化调节功能时非常有用&#xff0c;除此之外还用于自定义资源。 本文是&#xff08;Bilibili巽星石&#xff09;在4.0官方文档《GDScr…...

JAVA知识点全面总结6:泛型反射和注解

六.JAVA知识点全面总结6泛型反射和注解 1.什么是泛型?可以用在哪里&#xff1f; 2.泛型擦除机制是什么&#xff1f;为什么擦除&#xff1f; 3.通配符是什么&#xff1f;作用是什么&#xff1f; 未更新 1.注解是什么&#xff1f;有什么用&#xff1f; 2.注解的自定义和实…...

死代码删除(DCE,Dead Code Elimination)和激进的死代码删除(ADCE,Aggressive DCE)

死代码删除&#xff08;DCE&#xff0c;Dead Code Elimination&#xff09;和激进的死代码删除&#xff08;ADCE&#xff0c;Aggressive DCE&#xff09;死代码删除&#xff08;DCE&#xff0c;Dead Code Elimination&#xff09;DCE简介DCE基本算法激进的死代码删除&#xff0…...

询问new bing关于android开发的15个问题(前景、未来、发展方向)

前言&#xff1a;new bing是基于chat-gpt的新搜索工具&#xff0c;可以采用对话方式进行问题搜索&#xff0c;经过排队等候终于可以使用new bing&#xff0c;询问了目前我最关心的关于android开发几个问题 文章目录1.如何学好android开发&#xff1f;2.android开发能做什么?3.…...

【C++】初识类和对象

&#x1f3d6;️作者&#xff1a;malloc不出对象 ⛺专栏&#xff1a;C的学习之路 &#x1f466;个人简介&#xff1a;一名双非本科院校大二在读的科班编程菜鸟&#xff0c;努力编程只为赶上各位大佬的步伐&#x1f648;&#x1f648; 目录前言一、面向过程和面向对象初步认识二…...

EPICS S7nodave手册

第一章&#xff1a;介绍 本手册分为6章(不算次介绍部分)。第一章介绍s7nodave用于EPICS的设备支持的概念和特新。第二章描述启动一个使用s7nodave的IOC项目所需要的几步。第三章描述s7nodave支持的IOC shell命令。之后&#xff0c;第四章解释s7nodave支持的各种记录类型。最后…...

2023最新版本RabbitMQ的持久化和简单使用

上节讲了 RabbitMQ下载安装教程 &#xff0c; 本节主要介绍RabbitMQ的持久化和简单使用。 一、RabbitMQ消息持久化 当处理一个比较耗时得任务的时候&#xff0c;也许想知道消费者&#xff08;consumers&#xff09;是否运行到一半就挂掉。在当前的代码中&#xff0c;当RabbitM…...

函数式编程

函数式编程&#xff08;一&#xff09; 文章目录函数式编程&#xff08;一&#xff09;1. 前言1.1 概念2. Lambda 表达式2.1 概述2.2 基本的格式2.3 触发条件2.4 Lambda表达式2.4.1 无参无返回值2.4.2 有参无返回值2.4.3 无参数有返回值2.4.4 有参有返回值【重点】2.4.4.1 比较…...

别再硬记索引了!Mujoco Python API实战:用`name`属性优雅读写机器人关节状态

别再硬记索引了&#xff01;Mujoco Python API实战&#xff1a;用name属性优雅读写机器人关节状态 在机器人仿真开发中&#xff0c;我们常常陷入这样的困境&#xff1a;面对一个20自由度的机械臂&#xff0c;需要反复查阅文档确认data.qpos[12]对应的是哪个关节&#xff1b;当X…...

一文详解RPC,深入浅出从原理到主流框架

什么是RPC&#xff1f; RPC 全称 Remote Procedure Call&#xff0c;即远程过程调用。它的核心目标非常简单&#xff1a;让开发者调用远程机器上的函数/方法&#xff0c;就像调用本地函数一样简单&#xff0c;无需关注底层的网络连接、数据传输、序列化与反序列化等繁琐细节[1]…...

STM32开发中printf重定向的两种实现方法

1. STM32开发中的printf重定向需求解析在嵌入式开发中&#xff0c;调试信息的输出是开发过程中不可或缺的一环。对于STM32这类ARM Cortex-M系列微控制器而言&#xff0c;标准库中的printf函数默认是无法直接使用的&#xff0c;因为这类设备通常没有像PC那样的标准输出设备。这就…...

云效流水线+K8s实战:Java微服务全自动部署与优化指南(手把手版)

1. 云效流水线入门&#xff1a;从零搭建Java微服务CI/CD管道 第一次接触云效流水线时&#xff0c;我像发现新大陆一样兴奋——原来部署可以这么简单&#xff01;记得去年团队还在用Jenkins手动打包部署&#xff0c;每次发版都要折腾到凌晨。现在用云效 K8s的组合&#xff0c;我…...

3分钟搞定B站缓存视频永久保存:m4s转MP4终极指南

3分钟搞定B站缓存视频永久保存&#xff1a;m4s转MP4终极指南 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾因B站视频下架而懊恼&#…...

保姆级教程:在Jetson Orin上从零搭建DJI OSDK + ROS2 Humble开发环境(避坑指南)

保姆级教程&#xff1a;在Jetson Orin上从零搭建DJI OSDK ROS2 Humble开发环境&#xff08;避坑指南&#xff09; 当无人机遇上边缘计算&#xff0c;Jetson Orin与ROS2的组合正在重新定义自主飞行系统的开发范式。作为大疆生态中最硬核的开发方式&#xff0c;OSDK允许开发者直…...

银河麒麟kylin.desktop-generic编译程序执行权限问题深度解析与实战解决方案

1. 银河麒麟权限问题的现象与本质 最近在银河麒麟kylin.desktop-generic环境下开发时&#xff0c;遇到了一个让人头疼的问题&#xff1a;明明用gcc编译生成的可执行文件已经显示有x权限&#xff0c;运行时却提示"权限不够"。这种看似矛盾的报错&#xff0c;其实是银河…...

AI逆向实战:构建MCP工具链赋能Cursor自动化App动态分析

1. 为什么需要AI辅助App逆向分析 逆向工程一直是安全研究和移动应用开发中的重要环节。传统的逆向流程通常需要手动操作adb命令、反编译工具、抓包软件等&#xff0c;不仅效率低下&#xff0c;而且对操作者的技术要求极高。我曾在一次商业App的安全评估中&#xff0c;花了整整三…...

SAP PP顾问必看:手把手教你用增强PPCO0001实现CO02工单变更记录(附完整ABAP代码)

SAP PP顾问实战&#xff1a;深度解析PPCO0001增强实现CO02工单变更审计 在制造业SAP实施项目中&#xff0c;生产工单的变更追踪一直是合规审计的重点难点。当用户通过CO02事务码修改工单时&#xff0c;标准系统提供的变更记录功能存在明显局限——既无法满足精细审计需求&…...

从电桥到差分放大:三线制PT100测温电路的设计实践与精度考量

1. 三线制PT100测温电路的设计背景 温度测量在工业自动化、医疗设备、环境监测等领域都是基础且关键的技术需求。PT100作为一种广泛使用的铂电阻温度传感器&#xff0c;凭借其优异的线性度和稳定性&#xff0c;成为高精度测温的首选之一。但在实际应用中&#xff0c;如何准确测…...