vue3的proxy如何取代object和defineproperty

在 Vue 2.x 中,为了响应式地追踪对象属性的变化,Vue 使用了 Object.defineProperty 方法。但是,Object.defineProperty 有一些限制,比如它不能追踪属性的添加或删除,也不能直接用于数组或对象原型链上的属性。

Vue 3.x 通过使用 ES6 的 Proxy 对象来解决了这些问题。Proxy 允许你创建一个对象的代理,从而定义基本操作的自定义行为,包括属性查找、赋值、枚举、函数调用等。

Vue 3.x 使用 Proxy 取代 Object.defineProperty 主要是出于以下几个原因:

更好的性能:虽然 Proxy 在某些情况下可能比 Object.defineProperty 稍慢,但 Vue 3.x 通过优化和缓存来减少了这种差异。更重要的是,Proxy 提供了更简单的逻辑来追踪变化,减少了代码复杂性和潜在的错误。

支持数组和对象属性的添加/删除:使用 Proxy,Vue 3.x 可以轻松地追踪数组或对象属性的添加或删除。这在 Vue 2.x 中是不可能的,除非你显式地使用 Vue.set 或其他方法来确保响应式。

更好的扩展性:由于 Proxy 可以拦截更多的操作,Vue 3.x 可以更容易地添加新的响应式特性

在 Vue 3 中,Proxy 对象被用来实现其响应式下面是一个简单的 Vue 3 响应式 Proxy 的例子,尽管在实际开发中,我们通常不会直接操作 Proxy,而是使用 Vue 提供的 API,但理解其背后的原理是有帮助的。

javascript

// 假设这是我们的原始数据对象

const rawData = {

  name: 'John',

  age: 30,

  address: {

    city: 'New York'

  }

};

 

// 创建一个函数来生成响应式对象

function reactive(target) {

  if (typeof target !== 'object' || target === null) {

    return target;

  }

 

  // 使用 Proxy 来包装目标对象

  const handler = {

    get(target, key, receiver) {

      // 如果是嵌套对象,也需要是响应式的

      const value = Reflect.get(target, key, receiver);

      return reactive(value);

    },

    set(target, key, value, receiver) {

      // 当属性被设置时,触发更新

      const oldValue = target[key];

      const hadKey = oldValue !== undefined;

      const result = Reflect.set(target, key, value, receiver);

 

      // 触发更新逻辑(在这里只是简单打印)

      if (!hadKey) {

        console.log(`New key "${key}" added with value ${value}`);

      } else if (oldValue !== value) {

        console.log(`Key "${key}" updated to value ${value}`);

      }

 

      // 返回操作结果

      return result;

    }

  };

 

  // 使用 Proxy 包装目标对象并返回

  return new Proxy(target, handler);

}

 

// 生成响应式对象

const reactiveData = reactive(rawData);

 

// 访问和修改响应式对象

console.log(reactiveData.name); // "John"

reactiveData.name = 'Jane'; // "Key "name" updated to value Jane"

reactiveData.address.city = 'Los Angeles'; // 注意:这里的嵌套对象需要单独处理

 

// 嵌套对象也需要通过 reactive 变成响应式

reactiveData.address = reactive(reactiveData.address);

reactiveData.address.city = 'San Francisco'; // 现在会触发更新

 

 

注意:在上面的例子中,我们仅仅处理了对象的第一层属性。对于嵌套对象,我们需要在访问时递归地调用 reactive 函数来确保它们也是响应式的。在实际开发中,Vue 3 提供了更完善的实现来处理各种复杂的情况,包括数组、Map、Set 等。

 

 

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

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

相关文章

【Torch学习笔记】

作者:zjk 和 的区别是逐元素相乘,是矩阵相乘 cat stack 的区别 cat stack 是用于沿新维度将多个张量堆叠在一起的函数。它要求所有输入张量具有相同的形状,并在指定的新维度上进行堆叠。

【NumPy】关于numpy.mean()函数,看这一篇文章就够了

🧑 博主简介:阿里巴巴嵌入式技术专家,深耕嵌入式人工智能领域,具备多年的嵌入式硬件产品研发管理经验。 📒 博客介绍:分享嵌入式开发领域的相关知识、经验、思考和感悟,欢迎关注。提供嵌入式方向…

Android11热点启动和关闭

Android官方关于Wi-Fi Hotspot (Soft AP) 的文章:https://source.android.com/docs/core/connect/wifi-softap?hlzh-cn 在 Android 11 的WifiManager类中有一套系统 API 可以控制热点的开和关,代码如下: 开启热点: // SoftApC…

Vue 父组件使用refs来直接访问和修改子组件的属性或调用子组件的方法

步骤 1: 在子组件中定义要被修改的属性或方法 首先,在子组件中定义你想要父组件能够修改或调用的属性或方法。例如,我们有一个名为MyChildComponent的子组件,它有一个名为childData的数据属性和一个名为updateData的方法。 // 子组件 MyChi…

国际版Tiktok抖音运营流量实战班:账号定位/作品发布/热门推送/等等-13节

课程目录 1-tiktok账号定位 1.mp4 2-tiktok作品发布技巧 1.mp4 3-tiktok数据功能如何开通 1.mp4 4-tiktok热门视频推送机制 1.mp4 5-如何发现热门视频 1.mp4 6-如何发现热门音乐 1.mp4 7-如何寻找热门标签 1.mp4 8-如何寻找垂直热门视频 1.mp4 9-如何发现热门挑战赛 1…

【Python特征工程系列】一文教你使用PCA进行特征分析与降维(案例+源码)

这是我的第287篇原创文章。 一、引言 主成分分析(Principal Component Analysis, PCA)是一种常用的降维技术,它通过线性变换将原始特征转换为一组线性不相关的新特征,称为主成分,以便更好地表达数据的方差。 在特征重要…

DAMA数据管理知识体系必背18张框图

近期对数据管理知识体系中比较重要的框图进行了梳理总结,总共有18张框图,供大家参考。主要涉及数据管理、数据治理阶段模式、数据安全需求、主数据管理关键步骤,主数据架构、DW架构、数据科学的7个阶段、数据仓库建设活动、信息收敛三角、大数据分析架构图、数据管理成熟度等…

QGIS开发笔记(二):Windows安装版二次开发环境搭建(上):安装OSGeo4W运行依赖其Qt的基础环境Demo

若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/139136356 长沙红胖子Qt(长沙创微智科)博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV…

如果返回的json 中有 ‘///’ 转换

// 将返回数据的三条/和替换空 rowData.Jsonobj rowData.Jsonobj .replace(/^\s*\/\/\/.*$/gm, //); // 将返回的替换成" 并且外面加个"" rowData.Jsonobj "${rowData.Jsonobj .replace(//g, ")}"; // 转换回来数据用两个 JSON.parse(JSON.par…

Charles抓包App_https_夜神模拟器

Openssl安装 下载安装 下载地址: http://slproweb.com/products/Win32OpenSSL.html 我已经下载好了64位的,也放出来: 链接:https://pan.baidu.com/s/1Nkur475YK48_Ayq_vEm99w?pwdf4d7 提取码:f4d7 --来自百度网…

地下城游戏(leetcode)

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 地下城游戏https://leetcode.cn/problems/dungeon-game/description/ 图解分析&#xff1a; 代码 class Solution { public:int calculateMinimumHP(vector<vector<int>>& vv) {int row vv.size(), col …

Zookeeper 安装教程和使用指南

一、Zookeeper介绍 ZooKeeper 是 Apache 软件基金会的一个开源项目&#xff0c;主要基于 Java 语言实现。 Apache ZooKeeper 是一个开源的分布式应用程序协调服务&#xff0c;提供可靠的数据管理通知、数据同步、命名服务、分布式配置服务、分布式协调等服务。 关键特性 分布…

Nginx实战(安装部署、常用命令、反向代理、负载均衡、动静分离)

文章目录 1. nginx安装部署1.1 windows安装包1.2 linux-源码编译1.3 linux-docker安装 2. nginx介绍2.1 简介2.2 常用命令2.3 nginx运行原理2.3.1 mater和worker2.3.3 Nginx 的工作原理 2.4 nginx的基本配置文件2.4.1 location指令说明 3. nginx案例3.1 nginx-反向代理案例013.…

数据结构和算法|排序算法系列(三)|插入排序(三路排序函数std::sort)

首先需要你对排序算法的评价维度和一个理想排序算法应该是什么样的有一个基本的认知&#xff1a; 《Hello算法之排序算法》 主要内容来自&#xff1a;Hello算法11.4 插入排序 插入排序的整个过程与手动整理一副牌非常相似。 我们在未排序区间选择一个基准元素&#xff0c;将…

移动云以深度融合之服务,令“大”智慧贯穿云端

移动云助力大模型&#xff0c;开拓创新领未来。 云计算——AI模型的推动器。 当前人工智能技术发展的现状和趋势&#xff0c;以及中国在人工智能领域的发展策略和成就。确实&#xff0c;以 ChatGPT 为代表的大型语言模型在自然语言处理、文本生成、对话系统等领域取得了显著的…

项目管理:敏捷实践框架

一、初识敏捷 什么是敏捷(Agile)?敏捷是思维方式。 传统开发模型 央企,国企50%-60%需求分析。整体是由文档控制的过程管理。 传统软件开发面临的问题: 交付周期长:3-6个月甚至更长沟通效果差:文档化沟通不及时按时发布低:技术债增多无法发版团队士气弱:死亡行军不关注…

Vmware 17安装 CentOS9

前言 1、提前下载好需要的CentOS9镜像&#xff0c;下载地址&#xff0c;这里下载的是x86_64 2、提前安装好vmware 17&#xff0c;下载地址 &#xff0c;需要登录才能下载 安装 1、创建新的虚拟机 2、在弹出的界面中选择对应的类型&#xff0c;我这里选择自定义&#xff0c;点…

python command乱码怎么解决

python command乱码怎么解决&#xff1f;具体方法如下&#xff1a; 先引入import sys 再加一句&#xff1a;typesys.getfilesystemencoding() 然后在输出乱码的数据的后面加上“.decode(utf-8).encode(type)”。 比如输入“ss”乱码。 就写成print ss.decode(utf-8).encode(typ…

USB - Host controller类型介绍

USB 主机控制器类型 USB 主机控制器是计算机系统中的重要组件&#xff0c;负责管理计算机与连接的 USB 设备之间的通信。多年来&#xff0c;针对不同的 USB 标准和数据传输速率&#xff0c;开发了多种类型的 USB 主机控制器。以下是主要 USB 主机控制器类型的概述&#xff1a; …

【话题】AIGC行业现在适合进入吗

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 引言AIGC的发展阶段市场需求时机是否合适优势挑战 文章推荐 引言 在撰写关于当前是否适合进入AIGC&#xff08;人工智能生成内容&#xff09;行业的文章之前&#xff0…