【Vue】为什么Vue3使用Proxy代替defineProperty?

先来看看 Vue2 中 defineProperty 来操作数据:

const obj = {a: 1,b: 2,c: {a: 1,b: 2}
}
function _isObject(v) {return typeof v === 'object' && v !== null;
}
function observe(object) {for (let key in object) {let v = object[key];if (_isObject(v)) {observe(v)}Object.defineProperty(object, key, {get() {console.log('read ' + key);return v;},set(val) {if (val !== v) {console.log('change ' + key);v = val;}}})}
}
observe(obj)
// obj.a = 3;
obj.c.a = 4;

所以 Vue2 的缺陷是无法监听到属性的增加和删除,因为只有 getter 和 setter 函数。此外,还通过深度遍历,有效率的损失,将属性变成 getter 和 setter 函数。

而 Vue3 中Proxy 直接监听整个对象的变化:

const obj = {a: 1,b: 2,c: {a: 1,b: 2}
}
function _isObject(v) {return typeof v === 'object' && v !== null;
}
function observe(obj) {const proxy = new Proxy(obj, {get(target, k) {let v = target[k]if (_isObject(v)) {v = observe(v);}console.log('read', k)return v;},set(target, k, val) {if (target[k] !== val) {target[k] = val;console.log('change', k)}}// ....})return proxy;
}proxy.a = 3;
proxy.aa;

不监听属性,而是监听整个代理对象。只有当读取到对象属性的时候才会进行遍历监听。

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

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

相关文章

研发日记,Matlab/Simulink避坑指南(九)——可变数组应用Bug

文章目录 前言 背景介绍 问题描述 分析排查 解决方案 总结归纳 前言 见《研发日记,Matlab/Simulink避坑指南(四)——transpose()转置函数Bug》 见《研发日记,Matlab/Simulink避坑指南(五)——CAN解包 DLC Bug》 见《研发日记,Matlab/Si…

Hive之set参数大全-19

指定用于计算列的唯一值数(NDV,即基数)的算法 在 Hive 中,hive.stats.ndv.algo 是一个配置参数,用于指定用于计算列的唯一值数(NDV,即基数)的算法。以下是有关该参数的一些解释&…

计算机网络之ARP协议

ARP(地址解析协议,Address Resolution Protocol)是一种用于在网络中解析或确定目标主机的物理地址(如以太网MAC地址)的网络协议。ARP主要用于IPv4网络,它使得设备能夠在知道目标设备的IP地址的情况下找到其…

qemu + vscode图形化调试linux kernel

一、背景 使用命令行连接gdb 在调试时,虽然可以通过tui enable 显示源码,但还是存在设置断点麻烦(需要对着源码设置),terminal显示代码不方便,不利于我们学习;另外在gdb 下p命令显示结构体内容…

重构改善既有代码的设计-学习(六):处理继承关系

1、函数上移(Pull Up Method) 无论何时,只要系统内出现重复,你就会面临“修改其中一个却未能修改另一个”的风险。通常,找出重复也有一定的难度。 所以,某个函数在各个子类中的函数体都相同(它们…

Pandas--数据结构 - Series(3)

Pandas Series 类似表格中的一个列(column),类似于一维数组,可以保存任何数据类型。 Series 特点: 索引: 每个 Series 都有一个索引,它可以是整数、字符串、日期等类型。如果没有显式指定索引&…

Android Automotive:在路上释放 Android 操作系统的力量

Android Automotive:在路上释放 Android 操作系统的力量 Android 在汽车行业的历程车载信息娱乐系统 (IVI) 的演变汽车中的 Android:演变和进步Android 汽车操作系统的崛起Polestar 2:开创 Android 汽车体验Android 开源项目 (AOSP) 及其他项…

数据结构 练习题1答案版

1. 含有3个结点的二叉树的树形共有()种。 A.2 B.5 C.6 D.7 2. 一棵二叉树共有25个结点,其中5个是叶子结点,则度为1的结点数为( ) A.16 B.10 C.6 D.4 3. 某二叉树有5个度为…

华为三层交换机与防火墙对接配置上网示例

三层交换机与防火墙对接上网配置示例 组网图形 图1 三层交换机与防火墙对接上网组网图 三层交换机简介配置注意事项组网需求配置思路操作步骤配置文件 三层交换机简介 三层交换机是具有路由功能的交换机,由于路由属于OSI模型中第三层网络层的功能,所以…

mac安装mysql的8.0设置面板启动不了

1、前言 记得之前安装mysql5.7的时候,是可以直接从设置里面的mysql面板启动的,但是到了mysql8.0之后就启动不了了,这个问题不知道是版本问题还是我换了m系列芯片的mysql导致的,之前很多次都启动不了,这次搞了下&#x…

计算机网络之三次握手,四次挥手

TCP(传输控制协议)是一种面向连接的、可靠的传输层协议,用于在网络中的两个应用程序之间建立可靠的通信连接。TCP的核心特征之一是它使用“三次握手”过程来建立连接,以及“四次挥手”过程来终止连接。 三次握手(建立…

力扣20、有效的括号(简单)

1 题目描述 图1 题目描述 2 题目解读 给定的字符串只包含括号,判断这个字符串中的括号是否按照正确顺序出现,即这个字符串是否有效。 3 解法一:栈 C的STL中的stack,在解题时非常好用。 3.1 解题思路 使用栈stk,并枚举…

Windows 和 Anolis 通过 Docker 安装 Milvus 2.3.4

Windows 10 通过 Docker 安装 Milvus 2.3.4 一.Windows 安装 Docker二.Milvus 下载1.下载2.安装1.Windows 下安装(指定好Docker文件目录)2.Anolis下安装 三.数据库访问1.ATTU 客户端下载 一.Windows 安装 Docker Docker 下载 双击安装即可,安…

更新最近可以使用的 ip归属地免费api

太平洋IP地址归属地查询接口: 请求接口:http://whois.pconline.com.cn/ipJson.jsp?ip123.123.123.123&jsontrue 返回结果包括国家、省份、城市等信息。此外,如果IP地址为空,接口还可以根据网络定位返回设备位置信息。www.ip.…

【美团】交易系统平台-数据仓库研发工程师

更新时间:2024/01/28|工作地点:北京市|事业群:到家事业群|工作经验:3年 部门介绍 到家研发平台秉承“零售科技”战略,致力于推动餐饮、零售需求侧和供给侧数字化升级,构…

移动Web——平面转换-多重转换

1、平面转换-多重转换 多重转换技巧&#xff1a;先平移再旋转 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name&qu…

Hive中left join 中的where 和 on的区别

目录 一、知识点 二、测试验证 三、引申 一、知识点 left join中关于where和on条件的知识点&#xff1a; 多表left join 是会生成一张临时表。on后面&#xff1a; 一般是对left join 的右表进行条件过滤&#xff0c;会返回左表中的所有行&#xff0c;而右表中没有匹配上的数…

第3讲 谈谈final、finally、 finalize有什么不同?

参考 三者区别 final final 是 java 关键字可修饰变量&#xff08;类成员变量、类静态变量、局部变量和形参&#xff09;&#xff1a;表示不可修改当前变量的值&#xff08;这里的值可以是地址&#xff0c;也可以是基本类型的值&#xff09;#&#xff08;注意&#xff1a;fi…

C++11(中):智能指针

智能指针 1.内存泄漏1.1内存泄漏的概念以及危害1.2内存泄漏的场景1.3如何避免内存泄漏 2.智能指针的使用及原理2.1RAII2.2智能指针的原理2.3 std::auto_ptr2.4 定制删除器2.5 std::unique_ptr2.6 std::shared_ptr2.7 std::weak_ptr2.7.1 std::shared_ptr的循环引用2.7.2 循环引…

Spring Cloud 之 Gateway详解

大家好&#xff0c;我是升仔 前言 在微服务架构中&#xff0c;网关扮演着至关重要的角色。它不仅是服务与外界交流的门户&#xff0c;还负责路由、过滤和安全等重要功能。Spring Cloud Gateway作为Zuul的继任者&#xff0c;凭借其更高的性能和灵活的配置方式&#xff0c;成为…