Vue3:优化-从响应式数据中获取纯数据

一、情景说明

我们知道,Vue3中,创建变量时,常用ref、reactive来包裹,这样,这个变量就是响应式数据

然而,有时候,我们只需要纯数据

例如,我们在调用后端接口的时候,我们只要传递JSON结构的纯数据,不需要具备响应式

从而,提升性能。

这个时候,就需要用到toRaw、markRaw技术

二、案例

1、toRaw

从响应式对象中,取出纯JSON数据

js 复制代码
import { reactive,toRaw,markRaw,isReactive } from "vue";

/* toRaw */
// 响应式对象
let person = reactive({name:'tony',age:18})
// 原始对象
let rawPerson = toRaw(person)

2、markRaw

标记一个对象,使其永远不会变成响应式的。

javascript 复制代码
/* markRaw */
let citys = markRaw([
  {id:'asdda01',name:'北京'},
  {id:'asdda02',name:'上海'},
  {id:'asdda03',name:'天津'},
  {id:'asdda04',name:'重庆'}
])
// 根据原始对象citys去创建响应式对象citys2 ------ 创建失败,因为citys被markRaw标记了
let citys2 = reactive(citys)
相关推荐
y先森21 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy21 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891124 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
湫ccc1 小时前
《Python基础》之字符串格式化输出
开发语言·python
mqiqe1 小时前
Python MySQL通过Binlog 获取变更记录 恢复数据
开发语言·python·mysql
AttackingLin1 小时前
2024强网杯--babyheap house of apple2解法
linux·开发语言·python
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
Ysjt | 深2 小时前
C++多线程编程入门教程(优质版)
java·开发语言·jvm·c++