vue3 toRow与markRaw、customRef 获取真实的对象用于操作该对象

最新推荐文章于 2024-06-23 17:23:04 发布
最新推荐文章于 2024-06-23 17:23:04 发布
阅读量798 收藏 2
点赞数
分类专栏： 笔记 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50736511/article/details/124175399
版权

toRow

作用：将生成的响应式数据转为普通数据，这样就可以操作该对象，以及获得该对象的属性。否则获取的是一个响应式对象（输出是一个proxy对象）。
在这里插入图片描述

markRaw

作用：标记一个对象，使其永远不会再成为响应式对象

万事胜意sy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue.js click点击事件获取当前元素对象的操作
12-28
Vue.js可以传递$event对象 <body id=app> (>点击当前行文本 <li>li2 <li>li3 [removed] new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { say: function(msg, event) {...
vue3学习 4.toRaw
weixin_43152108的博客
06-25 1万+
1.toRaw 获取原始数据不是引用关系 而是全等关系 1.toRaw 从Reactive或Ref中得到原始数据 2.toRaw作用 做一些不想被监听的事情(提升性能) let obj ={name:'zs',age:19} /* ref/reactive数据类型的特点: 每次修改都会被追踪,都会更新UI界面,但是这样其实是非常消耗性能的 所以如果我们有一些操作不需要追踪,不需要更新UI界面,那么这个时候,
vue3中toRaw使用
热门推荐
u011200562的博客
10-19 2万+
toRaw使用场景 ref/reactive数据类型每次修改都会被追踪，都会更新UI界面，但是这样是非常消耗性能的，所以如果我们有一些操作不需要追踪，不需要更新UI界面，那么这个时候我们就可以通过toRaw方法拿到它的原始数据，对原始数据进行修改，这样就不会被追踪，这样就不会更新UI界面，这样性能就好了。 reactive： setup() { let obj={name:'lj',age:18} let state=reactive(obj) let obj2=toRa
vue3 toRaw获取一个响应式对象的原始对象，变为不是响应式
最新发布
m0_61265297的博客
06-23 130
【代码】vue3 toRaw获取一个响应式对象的原始对象，变为不是响应式。
vue3.0学习笔记 (toRow和markRaw初始化)
m0_58849641的博客
07-09 928
toRaw初始化之后 这样从一个能做响应式的变成一个普通数据使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。 在setup进入页面只会执行一次，如果后期再给person添加属性，这个属性不会是响应式的......
vue3.0(六) toRef，toValue，toRefs和toRow，markRaw
chengcheng9876的博客
05-11 1340
vue3.0(六) toRef，toValue，toRefs和toRow，markRaw
Vue3实用技巧：详解toRaw和markRaw的应用场景，让你快速还原数据并使其不再成为Vue3中的响应式对象
weixin_43263566的博客
10-02 5474
toRaw 与 markRaw （还原数据，设置数据不会再成为响应式对象）
Vue实现动态添加或者删除对象和对象数组的操作方法
10-17
在Vue.js框架中，动态添加或删除对象和对象数组是常见的需求，特别是在处理表单数据、列表展示等场景。本文将详细讲解如何在Vue项目中实现这一功能。 首先，我们来看一下添加对象到对象数组的核心代码： ```...
element vue Array数组和Map对象的添加与删除操作
10-17
主要介绍了element vue Array数组和Map对象的添加与删除功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue – props 声明数组和对象操作
11-20
在Vue.js框架中，`props`是父组件向子组件传递数据的一种机制。通过定义`props`，我们可以确保子组件能够接收并使用来自父组件的数据。在这个话题中，我们将深入探讨如何声明和处理`props`中的数组和对象。 首先，...
以响应式著称的Vue，为什么会提供toRaw和markRaw
程序员成长指北
11-01 789
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言众所周知，Vue作为典型得MVVM框架，是以响应式为基础，数据驱动视图。让我们开发起来更加方便，更加的得心应手。何为MVVM：MVVM是Model-View-ViewModel的简写。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面 (UI) 清晰分离。保持应用程序逻辑和UI之间的清晰分...
【vue3】使用toRaw，方法获取变量的原始值，便于调试
qq_17335549的博客
10-27 3154
【vue3】使用toRaw，方法获取变量的原始值，便于调试
vue3中的toRef、toRefs和toRaw
m0_60189088的博客
05-13 172
toRef的作用是将一个响应式对象中的属性转换成单独的响应式引用。转换后的响应式引用会跟踪原始属性的变化。转换后的响应式可以被用于计算属性及监听器中。如果原始对象是非响应式的则不会更新视图，数据会改变。
vue3知识点：toRaw 与 markRaw
刘大猫
07-18 1961
vue3知识点：toRaw 与 markRaw
#Vue3：shallowRef--shallowReactive--readonly--shaloowReadonly--toRow--markRow--customRef--Teleport--传
...
01-31 503
场景等响应式变了之后 某一个等几秒再变// track跟踪 trigger触发let initValue = '你好'return {get() {track() // 告诉vue数据msg很重要，要对msg持续关注，一旦msg变化就更新},trigger() // 通知vue数据变化})写成hooksreturn {num。
简单说下vue3 toraw的作用
ejunda的博客
11-13 974
toRaw 是 Vue 3 中的一个函数，它的作用是将一个响应式对象转换为普通的 JavaScript 对象。需要注意的是，toRaw 只能用于 Vue 3 中创建的响应式对象，对于普通对象或 Vue 2 中的响应式对象，调用 toRaw 会直接返回输入对象本身，不做任何转换。如果对象是响应式的，我们可以使用 toRaw 将其转换为原始值，并对其进行一些非响应式的操作。获取原始值：通过调用 toRaw，可以获取到一个响应式对象的原始 JavaScript 对象，而不是它的代理对象。
vue3小野森森-03-toRaw,markRaw,生命周期钩子，选项式provide及inject，组合式provide及inject，给provide及inject增加响应式，$refs
weixin_43745804的博客
11-18 1418
1、toRaw 返回一个reactive或readonly包裹的proxy对象 其实就是将一个proxy对象转化成普通对象 <template> <div> </div> </template> <script> import {ref,reactive,toRaw,readonly,shallowReactive,shallowReadonly,toRefs} from 'vue' export default { name:
vue3里面的markRaw和toRaw
06-01
Vue 3 中的 `markRaw` 和 `toRaw` 是用于处理响应式对象的函数。 `markRaw` 函数可以将一个对象标记为“原始值”，使其不再具有响应式特性。这意味着该对象的任何属性发生变化时，都不会触发 Vue 的响应式更新。 `toRaw` 函数则是将一个经过响应式处理的对象还原成普通对象。这可以用于在某些场景下避免出现“深度观察”的问题（即观察到对象内部的属性变化），从而提高性能。 需要注意的是，`markRaw` 和 `toRaw` 都应该谨慎使用，因为它们可能会破坏 Vue 的响应式机制，导致一些意外的问题。通常情况下，我们应该尽量避免使用这两个函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万事胜意sy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值