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】toRaw与markRaw的使用和示例（转）
【敦厚的曹操】的专栏
08-23 1121
【Vue3】toRaw与markRaw的使用和示例（转）
Vue3 中的工具类型总结
qq_40147756的博客
05-24 2609
在一些情况下，当需要在 TypeScript 中处理响应式数据时，可能会遇到类型推断的问题，而使用 UnwrapRef 可以帮助解决这些问题。在上述示例中，我们使用 UnwrapRef 来取消 count 响应式数据的引用类型的嵌套。使用 UnwrapRef 类型工具可以将 Ref 对象还原为其原始的值类型，以便在需要直接操作原始值的地方使用。当我们使用 ref 函数创建一个响应式数据时，会得到一个 Ref 对象，它是一个包装了原始值的对象。访问 Ref 对象的值。1，取消 ref 响应。
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 包裹，因此不等于源对象，建议只使用响应式代理，避免依赖于原始对象。...
白话typescript中的【extends】和【infer】(含vue3的UnwrapRef)
小雨小雨
05-03 7786
大家好，我是小雨小雨，致力于分享有趣的、实用的技术文章。 内容分为翻译和原创，如果有问题，欢迎随时评论或私信，希望和大家一起进步。 分享不易，希望能够得到大家的支持和关注。 extends typescript 2.8引入了条件类型关键字: extends，长这个样子: T extends U ? X : Y 看起来是不是有点像三元运算符: condition ? result(1)...
vue3中ref
qq_38677540的博客
11-21 1295
接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性.value。
vue3.x中使用cesium，vue3.x+Cesium
05-04
以下是关于在Vue3.x中使用Cesium的知识点： 1. **Vue CLI集成**: 首先，你需要通过Vue CLI创建一个新的项目。执行`vue create my-vue3-cesium-project`命令，然后选择自定义配置，这将允许你手动调整项目结构和配置...
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的基础上进行了许多优化和改进，旨在提供更高效、更...
以响应式著称的Vue，为什么会提供toRaw和markRaw
程序员成长指北
11-01 778
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言众所周知，Vue作为典型得MVVM框架，是以响应式为基础，数据驱动视图。让我们开发起来更加方便，更加的得心应手。何为MVVM：MVVM是Model-View-ViewModel的简写。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面 (UI) 清晰分离。保持应用程序逻辑和UI之间的清晰分...
Vue3实用技巧：详解toRaw和markRaw的应用场景，让你快速还原数据并使其不再成为Vue3中的响应式对象
weixin_43263566的博客
10-02 5275
toRaw 与 markRaw （还原数据，设置数据不会再成为响应式对象）
【Vue3 源码解析】ref 全家桶
小秀的博客
09-19 474
的函数，它用于创建 Ref 对象，或者直接返回已经存在的 Ref 对象（如果 rawValue 已经是 Ref 对象）。) 不同，它对引用的值进行浅层响应式转换，只有引用的值的直接属性会具有响应式特性，而不会递归地将其内部的属性也转换为响应式。这个函数签名的目的是允许传入一个已经是 Ref 对象的值，并且返回该值本身，而不再包装成新的 Ref 对象。通常情况下，它们的值是一样的，但在一些情况下，可能需要区分它们，例如在浅层 Ref 中。：这是函数的实际实现部分，它是一个具有多个重载的函数。
简单说下vue3 toraw的作用
ejunda的博客
11-13 971
toRaw 是 Vue 3 中的一个函数，它的作用是将一个响应式对象转换为普通的 JavaScript 对象。需要注意的是，toRaw 只能用于 Vue 3 中创建的响应式对象，对于普通对象或 Vue 2 中的响应式对象，调用 toRaw 会直接返回输入对象本身，不做任何转换。如果对象是响应式的，我们可以使用 toRaw 将其转换为原始值，并对其进行一些非响应式的操作。获取原始值：通过调用 toRaw，可以获取到一个响应式对象的原始 JavaScript 对象，而不是它的代理对象。
vue3中toRaw使用
u013594477的专栏
11-26 4470
1、toRaw使用场景 ref/reactive数据类型每次修改都会被追踪，都会更新UI界面，但是这样是非常消耗性能的，所以如果我们有一些操作不需要追踪，不需要更新UI界面，那么这个时候我们就可以通过toRaw方法拿到它的原始数据，对原始数据进行修改，这样就不会被追踪，这样就不会更新UI界面，这样性能就好了。 reactive: <template> <p>{{state}}</p> <button @click="myFn">按钮点击<
Vue3中的toRaw、markRaw
weixin_59233142的博客
01-19 443
使用场景：标记第三方库，防止把第三方库变成响应式对象。作用：标记一个对象使其永远不会变成响应式。作用：获取一个响应式对象的原始对象。使用场景：给同事数据不希望是响应式。
antv x6基类cell第六讲-通过控制面板修改属性
weixin_44213308的博客
04-11 4619
antv x6基类cell第六讲-通过控制面板修改属性
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、付费专栏及课程。

余额充值