Vue3中toRaw的使用场景

最新推荐文章于 2024-05-28 17:36:57 发布
最新推荐文章于 2024-05-28 17:36:57 发布
阅读量459 收藏
点赞数
分类专栏： Vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42372534/article/details/125170595
版权

如在搜索框中,绑定了有个响应式变量searchValue,但是有个请求数据的方法不需要该变量的代理跟踪访问,这么在输入框输入该值时,不会一直触发该请求方法,直到点击按钮,才触发该方法

toRaw

返回 reactive 或 readonly 代理的原始对象。这是一个“逃生舱”，可用于临时读取数据而无需承担代理访问/跟踪的开销，也可用于写入数据而避免触发更改。不建议保留对原始对象的持久引用。请谨慎使用。

	const formState: UnwrapRef<FormState> = reactive({})
    const { customerNo, enterpriseName } = toRaw(formState)
新时代的弩力
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3中使用tinyMCE
07-01
在Vue3中集成TinyMCE是一个常见的需求，特别是在构建富文本编辑器场景下。TinyMCE是一个功能强大的JavaScript WYSIWYG（所见即所得）编辑器，它提供了丰富的文本格式化选项，使得用户可以方便地创建和编辑HTML内容。...
vue3.x中使用cesium，vue3.x+Cesium
05-04
以下是关于在Vue3.x中使用Cesium的知识点： 1. **Vue CLI集成**: 首先，你需要通过Vue CLI创建一个新的项目。执行`vue create my-vue3-cesium-project`命令，然后选择自定义配置，这将允许你手动调整项目结构和配置...
【Vue3】toRaw与markRaw的使用和示例（转）
【敦厚的曹操】的专栏
08-23 1121
【Vue3】toRaw与markRaw的使用和示例（转）
Vue3中的toRaw、markRaw
weixin_59233142的博客
01-19 443
使用场景：标记第三方库，防止把第三方库变成响应式对象。作用：标记一个对象使其永远不会变成响应式。作用：获取一个响应式对象的原始对象。使用场景：给同事数据不希望是响应式。
vue3中的toRaw API
最新发布
xu1912715645的博客
05-28 577
Vue 3中的toRaw API是什么？怎么用？
“UnwrapRef“ 是一种类型，在同时启用了 “preserveValueImports“ 和 “isolatedModules“ 时，必须使用仅类型导入进行导入。
m0_56344602的博客
04-15 8551
Vue3+vite+TypeScript声明UnwrapRef出现 解决方式 找到tsconfig.json设置preserveValueImports为false "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "preserveValueImports": false, // "isolatedModules": false, }, 即可.
Vue3关于响应式数据类型(ref、reactive、toRef、以及toRefs)
Admans的专栏
08-30 2525
将一个响应式对象转换为一个普通对象，这个普通对象的每个 property 都是指向源对象相应 property 的 ref。如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。返回的对象以及其中嵌套的对象都会通过 ES Proxy 包裹，因此不等于源对象，建议只使用响应式代理，避免依赖于原始对象。...
以响应式著称的Vue，为什么会提供toRaw和markRaw
程序员成长指北
11-01 778
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言众所周知，Vue作为典型得MVVM框架，是以响应式为基础，数据驱动视图。让我们开发起来更加方便，更加的得心应手。何为MVVM：MVVM是Model-View-ViewModel的简写。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面 (UI) 清晰分离。保持应用程序逻辑和UI之间的清晰分...
【Vue3 源码解析】ref 全家桶
小秀的博客
09-19 474
的函数，它用于创建 Ref 对象，或者直接返回已经存在的 Ref 对象（如果 rawValue 已经是 Ref 对象）。) 不同，它对引用的值进行浅层响应式转换，只有引用的值的直接属性会具有响应式特性，而不会递归地将其内部的属性也转换为响应式。这个函数签名的目的是允许传入一个已经是 Ref 对象的值，并且返回该值本身，而不再包装成新的 Ref 对象。通常情况下，它们的值是一样的，但在一些情况下，可能需要区分它们，例如在浅层 Ref 中。：这是函数的实际实现部分，它是一个具有多个重载的函数。
Three.js3D场景编辑器（vue3版本）
10-18
vue3，three.js，vite。 构建的three.js3D场景编辑器。支持场景导入，导出。自定义配置。 导出的文件支持https://www.npmjs.com/package/scene-view。解析器解析渲染。 目前为纯前端单机版。 当前文件为打包后文件，...
vue中使用codemirror的实例详解
10-17
首先，为了在Vue项目中使用Vue-Codemirror，你需要通过npm安装这个库： ```bash npm install vue-codemirror --save ``` 接下来，在`main.js`文件中导入Vue-Codemirror以及其样式文件： ```javascript import { ...
Vue3pdf中文文档
06-06
【Vue3pdf中文文档】和【Vue3pdf中文教程】主要涵盖了Vue3框架的基本概念、安装方式、核心特性以及如何在项目中应用Vue3。Vue3是Vue.js框架的最新版本，它在Vue2的基础上进行了许多优化和改进，旨在提供更高效、更...
2020-08-12
刘小明的博客
08-12 108
vue-next 函数式的API，了解这些的话，无论是对于源码的阅读，还是当正式版发布时开始学习，应该都会有起到一定的辅助作用。 基本例子 直接拷贝下面代码，去运行看效果吧。推荐使用高版本的chrome浏览器，记得打开F12调试工具哦！ Title 设计动机 逻辑组合与复用 组件 API 设计所面对的核心问题之一就是如何组织逻辑，以及如何在多个组件之间抽取和复用逻辑。基于 Vue 2.x 目前的 API 有一些常见的逻辑复用模式，但都或多或少存在一些问题。这些模式包括： Mixin
Vue3实用技巧：详解toRaw和markRaw的应用场景，让你快速还原数据并使其不再成为Vue3中的响应式对象
weixin_43263566的博客
10-02 5275
toRaw 与 markRaw （还原数据，设置数据不会再成为响应式对象）
简单说下vue3 toraw的作用
ejunda的博客
11-13 970
toRaw 是 Vue 3 中的一个函数，它的作用是将一个响应式对象转换为普通的 JavaScript 对象。需要注意的是，toRaw 只能用于 Vue 3 中创建的响应式对象，对于普通对象或 Vue 2 中的响应式对象，调用 toRaw 会直接返回输入对象本身，不做任何转换。如果对象是响应式的，我们可以使用 toRaw 将其转换为原始值，并对其进行一些非响应式的操作。获取原始值：通过调用 toRaw，可以获取到一个响应式对象的原始 JavaScript 对象，而不是它的代理对象。
flutter 基础容器wdiget TextField Form FormField FormState
litter_lj的博客
07-03 749
1.属性 const TextField({ Key key, TextEditingController controller, //编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。大多数情况下我们都需要显式提供一个controller来与文本框交互。如果没有提供controller，则TextField内部会自动创建一个 FocusNode foc...
推荐开源项目：FormState - 简化前端表单状态管理
gitblog_00050的博客
04-27 374
推荐开源项目：FormState - 简化前端表单状态管理 项目地址:https://gitcode.com/formstate/formstate 在前端开发中，处理表单数据和验证往往是一项繁琐的任务。FormState 是一个轻量级但功能强大的库，旨在简化这一流程，帮助开发者更高效地管理和控制表单的状态。 项目简介 FormState 是一个基于 JavaScript 的库，它提供了一种声明式...
vue3源码ref章节
py_boy的博客
08-18 2372
Ref类型 // 生成一个唯一key，开发环境下增加描述符 'refSymbol' declare const RefSymbol: unique symbol export interface Ref<T = any> { /** * Type differentiator only. * We need this to be in public d.ts but don't want it to show up in IDE * autocomplete, so we
vue3中teleport的使用场景
08-14
回答: Vue3中的Teleport组件可以在需要将DOM元素放置到指定位置的场景中使用。它可以将当前的DOM元素传送到指定的目标元素中，或者将其还原到原来的位置。一个常见的使用场景是实现弹出框或模态框的效果，可以将弹出框的DOM元素传送到指定的目标位置，从而实现在页面的任意位置显示弹出框的效果。另外，Teleport组件还可以在视图切换时实现平滑的动画效果，例如在切换页面时，可以先将当前页面的DOM元素传送到指定位置，然后再将下一个页面的DOM元素传送回原来的位置，以实现过渡效果。总的来说，Teleport组件在需要动态操作DOM元素位置的场景中非常有用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue2实现Vue3中的Teleport传送门，【应用场景：实现B站视频播放效果】](https://blog.csdn.net/m0_51431448/article/details/124158279)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue3 teleport的使用](https://blog.csdn.net/qq_40864647/article/details/126263699)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值