一、情景说明
我们知道,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)