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

生产队队长2024-04-07 15:43

一、情景说明

我们知道，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)