vue3中的toRaw API

文章目录

    • 什么是toRaw API?
    • 为什么需要toRaw?
    • 如何使用toRaw?
    • 实际应用场景


在这里插入图片描述

这两天在写项目的时候,发现了一个之前没用过的api,于是上网查了一下,发现这个api还是挺常用,所以在这记录一下

什么是toRaw API?

toRaw 是 Vue 3 中的新工具,用于获取一个响应式对象的原始对象。Vue 3 中引入了响应式代理,这意味着我们通常处理的是被代理的对象,而不是原始对象。toRaw 提供了一种方式,可以绕过代理,直接访问和操作原始数据。

为什么需要toRaw?

在某些情况下,直接操作原始对象比操作响应式代理更有效。以下是一些常见的场景:

  • 调试和日志记录:在调试或记录对象时,直接输出代理对象可能会导致混淆,使用toRaw可以更清晰地看到原始数据。
  • 性能优化:有时我们需要跳过代理机制进行一些性能关键的操作,这时toRaw可以派上用场。
  • 库和插件开发:如果你在开发Vue插件或库,可能需要处理原始对象而不是响应式代理。

如何使用toRaw?

使用toRaw非常简单。它是一个从vue包中导出的函数,接受一个响应式对象并返回其原始对象。以下是一个基本示例:

import { reactive, toRaw } from 'vue';const state = reactive({count: 0,nested: {message: 'Hello, Vue 3!'}
});// 获取原始对象
const rawState = toRaw(state);console.log(rawState); // { count: 0, nested: { message: 'Hello, Vue 3!' } }// 修改原始对象不会触发响应式更新
rawState.count = 1;
console.log(state.count); // 0// 修改响应式对象会正常工作
state.count = 2;
console.log(state.count); // 2
console.log(rawState.count); // 2

在这个示例中,我们首先创建了一个响应式对象state。然后,我们使用toRaw获取了这个响应式对象的原始对象rawState。可以看到,对原始对象的修改不会触发响应式更新,而对响应式对象的修改则会同步到原始对象。

实际应用场景

1、调试和日志记录
在调试复杂的响应式对象时,直接查看代理对象可能会让人困惑。使用toRaw可以更清晰地查看对象的实际结构。

import { reactive, toRaw } from 'vue';const state = reactive({user: {name: 'Alice',age: 25}
});
console.log(toRaw(state));

2、性能优化
在处理大量数据时,跳过响应式代理进行操作可以提高性能。例如,在大型列表的批量更新中,直接操作原始对象会更高效。

import { reactive, toRaw } from 'vue';const list = reactive([...Array(10000).keys()]);const rawList = toRaw(list);// 直接操作原始数组,提高性能
rawList.forEach((item, index) => {rawList[index] = item * 2;
});console.log(list[0]); // 0,因为没有触发响应式更新
console.log(rawList[0]); // 0,因为我们直接修改的是原始对象

3、库和插件开发
在开发Vue插件或库时,可能需要处理原始对象而不是代理对象。例如,在创建一个深拷贝函数时,使用toRaw可以避免循环引用和代理对象带来的问题。

import { reactive, toRaw } from 'vue';function deepClone(obj) {if (obj === null || typeof obj !== 'object') {return obj;}const cloned = Array.isArray(obj) ? [] : {};for (const key in obj) {cloned[key] = deepClone(toRaw(obj[key]));}return cloned;
}const state = reactive({user: {name: 'Bob',age: 30}
});const clonedState = deepClone(state);
console.log(clonedState); // { user: { name: 'Bob', age: 30 } }

总的来说,toRaw 是 Vue 3 中一个非常有用的工具,它允许我们直接访问和操作响应式对象的原始数据。在调试、性能优化以及库和插件开发中,toRaw 都能发挥重要作用。通过本文的介绍,希望你对toRaw有了更深入的理解,并能在实际项目中灵活运用它。

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

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

相关文章

前端 JS 经典:Web 性能指标

什么是性能指标:Web Performance Metrics 翻译成 Web 性能指标,一般和时间有关系,在短时间内做更多有意义的事情。 一个站点表现得好与不好,标准在于用户体验,而用户体验好不好,有一套 RAIL 模型来衡量。这…

计算机毕业设计 | SpringBoot+vue仓库管理系统(附源码)

1,绪论 1.1 项目背景 随着电子计算机技术和信息网络技术的发明和应用,使着人类社会从工业经济时代向知识经济时代发展。在这个知识经济时代里,仓库管理系统将会成为企业生产以及运作不可缺少的管理工具。这个仓库管理系统是由:一…

amis 文件上传 大文件分块上传

amis 图片/文件上传组件 receiver:参数配置为上传接口。 {"type": "input-image", // "type": "input-file","label": "照片","name": "url", "imageClassName": &qu…

Visual Studio 的使用

目录 1. 引言 2. 安装和配置 2.1 系统要求 2.2 安装步骤 2.3 初次配置 3. 界面介绍 3.1 菜单栏和工具栏 3.2 解决方案资源管理器 3.3 编辑器窗口 3.4 输出窗口 3.5 错误列表 3.6 属性窗口 4. 项目管理 4.1 创建新项目 4.2 导入现有项目 4.3 项目属性配置 5. 代…

【UE5.1 角色练习】08-物体抬升、抛出技能 - part2

目录 前言 效果 步骤 一、让物体缓慢的飞向手掌 二、向着鼠标方向发射物体 前言 在上一篇(【UE5.1 角色练习】08-物体抬升、抛出技能 - part1)的基础上继续完成角色将物体吸向手掌,然后通过鼠标点击的方向来发射物体的功能。 效果 步骤…

Nginx配置及优化

Nginx配置及优化 前言nginx.conf拆分理解上线 最近在配置Nginx的时候,偶尔一些细致的理论有些模糊,配置起来费了点功夫,今天来详细写一下我个人的理解,文章参考了一些官网和其他优秀博主的文章http://t.csdnimg.cn/GbID9。 前言 …

【MATLAB源码-第217期】基于matlab的16QAM系统相位偏移估计HOS算法仿真,对比补偿前后的星座图误码率。

操作环境: MATLAB 2022a 1、算法描述 高阶统计量(HOS)频偏估计算法 高阶统计量(Higher Order Statistics, HOS)频偏估计算法是一种先进的信号处理技术,广泛应用于现代数字通信系统中,以应对…

【Linux】Linux环境基础开发工具_2

文章目录 四、Linux环境基础开发工具2. vimvim的常见模式 未完待续 四、Linux环境基础开发工具 2. vim vim 是Linux下的一款 多模式编辑器 ,可以用来写代码,是 vi 的升级版。 此时无法输入,需要切换模式。 如上图,i 就是切换成…

ch3运输层--计算机网络期末复习(持续更新中)

运输层位于网络层之上 运输层协议提供的某些服务受到网络层协议的限制。比如,时限和带宽保证。 运输层也提供自己的特殊服务。比如,可靠数据传输服务,安全性服务。 网络层:两个主机之间的逻辑通信 运输层:两个进程之间的逻辑通信 网络地址:主机的标识(IP地址) 传输地址: …

【Rust日报】Rust 中的形式验证

文章 - 未来的愿景:Rust 中的形式验证 这篇文章回顾了形式化验证的基本概念,作者展示了如何使用 Hoare triples 来描述和推理程序的正确性,以及如何使用分离逻辑来解决验证的复杂性。文章还解释了为什么 Rust 适用于形式化验证,以…

100个投资者99个选择使用这款EA,WeTrade发现1个事实

为什么100个投资者会有99个选择使用这款EA,是因为这款EA能提供两个版本吗?是因为能控制风险吗?都不是,WeTrade发现1个事实才是这么多投资者选择的原因,那就是能实现100%的盈利率。 我们都知道外汇狙击手EA提供两种版本,分别是标…

OpenAI新模型开始训练!GPT6?

国内可用潘多拉镜像站GPT-4o、GPT-4(更多信息请加Q群865143845): 站点:https://xgpt4.ai0.cn/ OpenAI 官网 28 日发文称,新模型已经开始训练! 一、新模型开始训练 原话:OpenAI has recently begun training…

【C++】模拟实现string类

🦄个人主页:修修修也 🎏所属专栏:C ⚙️操作环境:Visual Studio 2022 目录 一.了解项目功能 二.逐步实现项目功能模块及其逻辑详解 🎏构建成员变量 🎏实现string类默认成员函数 📌构造函数 📌析构函数…

Spring框架温习

Spring Spring是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring仍然可以和其他的框架无缝整合。 Spring 特点: 轻量级、控制反转、面向切面、容器、框架集合 Spring 核心组件: Spring 常用模块&…

【UE 反射】反射的原理是什么?如何使用机制?

目录 0 拓展0.1 静态类型检查0.1.1 静态类型检查的主要原理0.1.2 编译器的工作流程0.1.3 静态类型检查的优点和缺点0.1.4 示例0.1.5 C也可以在运行时类型检查RTTI基本原理RTTI的实现RTTI的工作流程RTTI的限制 0.2 运行时动态类型检查0.2.1 主要特点0.2.2 动态类型检查的实现0.2…

Three.js 入门介绍与环境搭建

Three.js 入门介绍与环境搭建 一、引言 Three.js 是一个强大的用于在网页上创建和展示 3D 图形的 JavaScript 库。艾斯视觉作为ui设计和前端开发服务商在这里很高兴能与你共同探讨学习:它使得开发者能够轻松地构建令人惊叹的 3D 场景和交互体验。在这篇文章中&…

刷代码随想录有感(83):贪心算法——最大子数组和

题干&#xff1a; 代码&#xff1a; class Solution { public:int maxSubArray(vector<int>& nums) {int res INT_MIN;int count 0;for(int i 0; i < nums.size(); i){count nums[i];if(count > res) res count;if(count < 0)count 0;}return res;} …

【微服务】springboot 构建docker镜像多模式使用详解

目录 一、前言 二、微服务常用的镜像构建方案 3.1 使用Dockerfile 3.2 使用docker plugin插件 3.3 使用docker compose 编排文件 三、环境准备 3.1 服务器 3.2 安装JDK环境 3.2.1 创建目录 3.2.2 下载安装包 3.2.3 配置环境变量 2.2.4 查看java版本 3.3 安装maven …

百度页面奔跑的白熊html、css

一、相关知识-动画 1.基本使用&#xff1a;先定义再调用 2. 调用动画 用keyframes定义动画&#xff08;类似定义类选择器&#xff09; keyframes动画名称{ 0%{ width:100px&#xff1b; } 100%{ width:200px; } } 使用动画 div { width:200px; height:200px; background-…

用户流失分析:如何使用Python训练一个用户流失预测模型?

引言 在当今商业环境中&#xff0c;客户流失分析是至关重要的一环。随着市场竞争的加剧&#xff0c;企业需要更加注重保持现有客户&#xff0c;并深入了解他们的离开原因。本文探讨了用户流失分析的核心概念以及如何构建客户流失预测模型的案例。通过分析用户行为数据和交易模式…