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)
相关推荐
秋の花6 分钟前
【JAVA基础】Java集合基础
java·开发语言·windows
小松学前端9 分钟前
第六章 7.0 LinkList
java·开发语言·网络
可峰科技18 分钟前
斗破QT编程入门系列之二:认识Qt:编写一个HelloWorld程序(四星斗师)
开发语言·qt
清灵xmf21 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
全栈开发圈22 分钟前
新书速览|Java网络爬虫精解与实践
java·开发语言·爬虫
面试鸭27 分钟前
离谱!买个人信息买到网安公司头上???
java·开发语言·职场和发展
小白学大数据28 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
Python大数据分析@31 分钟前
python操作CSV和excel,如何来做?
开发语言·python·excel
qq_3901617736 分钟前
防抖函数--应用场景及示例
前端·javascript
上海_彭彭1 小时前
【提效工具开发】Python功能模块执行和 SQL 执行 需求整理
开发语言·python·sql·测试工具·element