vueJs函数toRaw markRaw使用对比详解

目录
  • 前言
  • toRaw()函数
  • markRaw()函数
  • 总结

前言

针对一些特殊的需求,在项目里,需要将响应式数据变为普通原始类型数据,这种情况是有的

在Vue里,能够将普通数据类型的数据变为响应式数据,同时,也能将响应式类型数据变为普通类型数据

可以用于提升数据的性能

toRaw()函数

接收一个reactive响应式数据,将一个响应式的数据变为普通类型的数据,转化为非响应式数据,相当于还原对象,reactive相当于制作,但对于ref响应式数据不起作用

将一个由reactive生成的响应式对象转为普通(原始)对象

toRaw()可以返回由reactive(),readonly(),shallowReactive()或shallowReadonly()创建的代理对应的原始对象

这是一个可以用临时读取而不引起代理访问/跟踪开销,或是写入而不触发更改的特殊方法,在官方文档里,是不建议保存对原始对象的持久引用

使用场景:用于读取响应式对象的普通对象,对这个普通对象的所有操作,不会引起页面的更新

const foo = {}
const reactiveFoo = reactive(foo)
console.log(toRaw(reactiveFoo) === foo)  // true

注意

针对对象,后续动态新增的属性,如果没有把整个对象对外暴露出去,模板中使用新增的变量是不生效的(针对setup函数形式)

markRaw()函数

接收一个原始数据,标记一个对象,使它永远不会再成为响应式对象,也就是数据在逻辑中即使修改变化了,但是页面不会更新变化

将一个对象标记为不可被转为代理,返回该对象本身

应用场景:

[1]. 有些值不应该被设置为响应式的,例如复杂的第三方类库或Vue组件对象

[2]. 当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false
// 也适用于嵌套在其他响应性对象
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

markRaw()与shallowReactive()这样浅层式API使你可以有选择的避开默认的深度响应/只读转换,并在状态关系谱中嵌入原始,非代理的对象

如果把一个嵌套的,没有标记的原始对象设置成一个响应式对象,然后再次访问它,你获取到的是代理的版本,这可能会导致对象身份风险

即执行一个依赖于对象身份的操作,但却同时使用了同一对象的原始版本和代理版本

const foo = markRaw({
  nested: {}
})
const bar = reactive({
  // 尽管 `foo` 被标记为了原始对象，但 foo.nested 却没有
  nested: foo.nested
})
console.log(foo.nested === bar.nested) // false

总结

ref()与reactive()是将一个非响应式类型数据变为响应式数据,而toRaw()与markRaw()相当于是对响应式数据的还原,将一个响应式数据变为非响应式数据

而toRaw只针对响应式对象类型的数据起作用,如果涉及到将一个响应式数据转变为非响应式数据,只用于纯数据的渲染,不引起页面的更新,就可以使用toRaw或markRaw()

以上就是vueJs函数toRaw markRaw使用对比详解的详细内容，更多关于vueJs函数toRaw markRaw的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue 2中实现CustomRef方式防抖节流

    目录 前言 背景 撸代码 防抖(debounce) 代码 使用 节流(throttle) 代码 使用 总结 前言 今天给大家带来的是Vue 2 中的实现 CustomRef 方式防抖/节流这篇文章,前几天利用 customRef 实现了在 vue 3 中的极致防抖/节流的新方式.感兴趣的朋友可以点击 Vue 3 中的极致防抖/节流(含常见方式防抖/节流) 进行查看. 在前端的开发过程中,在涉及到与用户交互的过程中是基本上都是需要处理的,常规操作就是在对应位置加上防抖或者节流. 加上防抖或者节流的

  • 一文搞懂VueJs中customRef函数使用

    目录 前言 示例-延迟显示 总结 前言 ref是Vue官方提供的componsition API,将一个非响应式数据转变为响应式数据的函数,至于底层怎么实现数据的收集与响应式 使用者无需去关注,相当于就是精装电脑,然而有时候,针对一些复杂特殊的需求,我们需要自己造轮子,自己手动原生的去实现内部结构 实现基础的功能的同时,还要进行额外的拓展,那么这时候就需要自定义ref了的,它就相当于是组装式的电脑,内部结构需要自己去组装,实现 而非直接从商城里购买,用一些现成的零部件组装一个类似精装的电脑,甚至

  • vueJs函数readonly与shallowReadonly使用对比详解

    目录 前言 readonly shallowreadonly 总结 前言 在使用vue3开发项目时,对于一些特殊的需求,针对有些数据字段,在前端,只允许读取,不允许修改,比如:有的网站用户名,一旦注册了,就不允许修改 当然,有时候,我们从别的地方引用数据过来,用作信息的展示,但是却不允许修改,不希望影响源数据 那么readonly与shallowReadonly这两个API就很有用了的 readonly 让一个响应式数据变为只读的,接收一个响应式数据,经过readonly加工处理一下,那么新赋值

  • Vue2 Dialog弹窗函数式调用实践示例

    目录 前言 Vue2 的弹窗常用的使用方式 第一种:将弹窗写在上下文中 第二种:原型上注入全局方法 第三种:通过依赖注入的方式 合理的使用方式 功能实现 结语 前言 Dialog 对话框组件几乎是每个前端项目必不可少的组件,通常是在保留当前页面状态并屏蔽其他用户输入的情况下,与用户交互并承载相关操作. 在 BOM 的方法中,alert.prompt 都是以前用来做类似功能的方法,但是这些浏览器内置方法会完全停止网页代码执行,对于贫乏的前端线程资源来说实在是过于僵硬.于是便产生了各种各样的 Js

  • VueJs中toRef与toRefs函数对比详解

    目录 正文 toRef()函数 与ref的不同 toRefs()函数 为啥需要toRef()与toRefs()函数 总结 正文 ref是处理基本数据类型响应式API函数,在setup中声明定义的变量,可以直接在模板中使用 没有被响应式API包裹处理的变量数据,是不具备响应式能力的 也就是往往在逻辑中修改了数据,但是页面不会更新,那怎么样将一个非响应式数据变成响应式数据 就需要用到toRef()与toRefs()这两个componsition API的 单纯的去看概念,往往比较抽象,是难以理解的,

  • Python 内置函数globals()和locals()对比详解

    这篇文章主要介绍了Python globals()和locals()对比详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Python的两个内置函数,globals()和locals() ,它们提供了基于字典的访问局部和全局变量的方式. globals()是可写的,即,可修改该字典中的键值,可新增和删除键值对. 而locals()是不可修改字典中已存在的键值的,也不能pop移除键值对,但是可以新增键值对. Demo: a = 1 # 定义一个

  • lambda表达式与传统接口函数实现方式对比详解

    lambda表达式与传统接口函数实现方式对比详解

    目录 在本号之前写过的一些文章中,笔者使用了lambda表达式语法,一些读者反映说代码看不懂.本以为java 13都已经出了,java 8中最重要特性lambda表达式大家应该都掌握了,实际上还是存在大量的程序员没有使用java8,还有的使用了java8也不会使用lambda表达式.所以,写这篇文章还是有必要的,如果您觉得我的文章对您有帮助,期待您的关注. Lambda表达式是Java 8最流行最常用的功能特性.它将函数式编程概念引入Java,函数式编程的好处在于可以帮助我们节省大量的代码,非常

  • Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）

    Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 接下来给大家介绍vuejs单向绑定.双向绑定.列表渲染.响应函数基础知识,具体详情如下所示: (一)单向绑定 <div id="app"> {{ message }} </div> <sc

  • 关于Django ForeignKey 反向查询中filter和_set的效率对比详解

    前言 大家使用 Django 创建模型的时候一定会经常使用 ForeignKey 来创建两个表格之间多对一的外键关系,例如B中有一个 models.ForeignKey(A) .而当我们需要反向查询 A 中某个具体实例所关联的 B 时,可能会用到 A.B_set.all() 或 B.objects.filter(A) 这两种不同的方法. 不知道大家有没有也想过一个问题:当网站实际上线后,SEO强调页面加载速度,而当面对不断增大的请求量,这两种方法的哪一种速度更快? 馆主我产生了这个疑问,所以就打

  • Python图像运算之图像灰度直方图对比详解

    Python图像运算之图像灰度直方图对比详解

    目录 一.灰度增强直方图对比 二.灰度减弱直方图对比 三.图像反色直方图对比 四.图像对数变换直方图对比 五.图像阈值化处理直方图对比 六.总结 一.灰度增强直方图对比 图像灰度上移变换使用的表达式为: DB=DA+50 该算法将实现图像灰度值的上移,从而提升图像的亮度,结合直方图对比的实现代码如下所示. # -*- coding: utf-8 -*- # By:Eastmount import cv2 import numpy as np import matplotlib.pyplot as

  • react性能优化useMemo与useCallback使用对比详解

    react性能优化useMemo与useCallback使用对比详解

    目录 引言 对比 useMemo useCallback 引言 在介绍一下这两个hooks的作用之前,我们先来回顾一下react中的性能优化.在hooks诞生之前,如果组件包含内部state,我们都是基于class的形式来创建组件.当时我们也知道,react中,性能的优化点在于: 调用setState,就会触发组件的重新渲染,无论前后的state是否不同 父组件更新,子组件也会自动的更新 基于上面的两点,我们通常的解决方案是:使用immutable进行比较,在不相等的时候调用setState:在

  • React.memo函数中的参数示例详解

    React.memo函数中的参数示例详解

    目录 React.memo?这是个啥? React.memo的第一个参数 父组件 子组件 React.memo优化 React.memo的第二个参数 父组件 子组件 React.memo优化 父组件 子组件 小结 React.memo?这是个啥? 按照官方文档的解释: 如果你的函数组件在给定相同 props 的情况下渲染相同的结果,那么你可以通过将其包装在 React.memo 中调用,以此通过记忆组件渲染结果的方式来提高组件的性能表现.这意味着在这种情况下,React 将跳过渲染组件的操作并直

  • JavaScript学习小结之被嫌弃的eval函数和with语句实例详解

    前面的话 eval和with经常被嫌弃,好像它们的存在就是错误.在CSS中,表格被嫌弃,在网页中只是用表格来展示数据,而不是做布局,都可能被斥为不规范,矫枉过正.那关于eval和with到底是什么情况呢?本文将详细介绍eval()函数和with语句 eval 定义 eval()是一个全局函数,javascript通过eval()来解释运行由javascript源代码组成的字符串 var result = eval('3+2'); console.log(result,typeof result)

  • PHP中filter函数校验数据的方法详解

    介绍PHP中filter函数校验数据的方法详解,PHP过滤器包含两种类型:Validation用来验证验证项是否合法 .Sanitization用来格式化被验证的项目,因此它可能会修改验证项的值,将不合法的字符删除. input_filters_list() 用来列出当前系统所支持的所有过滤器. 复制代码 代码如下: <?php foreach(filter_list() as $id => $filter) {     echo $filter.' '.filter_id($filter).

  • JavaScript中匿名函数的用法及优缺点详解

    匿名函数可以有效的保证在页面上写入Javascript,而不会造成全局变量的污染. 这在给一个不是很熟悉的页面增加Javascript时非常有效,也很优美. 一.什么是匿名函数? 在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function(

随机推荐