东莞免费建站在线咨询,网站广告调词平台,软件开发企业,温州论坛招聘一、情景说明
我们知道#xff0c;Vue3中#xff0c;创建变量时#xff0c;常用ref、reactive来包裹#xff0c;这样#xff0c;这个变量就是响应式数据 然而#xff0c;有时候#xff0c;我们只需要纯数据 例如#xff0c;我们在调用后端接口的时候#xff0c;我们只…一、情景说明
我们知道Vue3中创建变量时常用ref、reactive来包裹这样这个变量就是响应式数据 然而有时候我们只需要纯数据 例如我们在调用后端接口的时候我们只要传递JSON结构的纯数据不需要具备响应式 从而提升性能。
这个时候就需要用到toRaw、markRaw技术
二、案例
1、toRaw
从响应式对象中取出纯JSON数据
import { reactive,toRaw,markRaw,isReactive } from vue;/* toRaw */
// 响应式对象
let person reactive({name:tony,age:18})
// 原始对象
let rawPerson toRaw(person)2、markRaw
标记一个对象使其永远不会变成响应式的。
/* markRaw */
let citys markRaw([{id:asdda01,name:北京},{id:asdda02,name:上海},{id:asdda03,name:天津},{id:asdda04,name:重庆}
])
// 根据原始对象citys去创建响应式对象citys2 —— 创建失败因为citys被markRaw标记了
let citys2 reactive(citys)
