吉林省建设工程质监站网站,优化网络,建站网址建设,淘宝网页设计网站Vue3-toRaw 和 markRaw 函数
toRaw(转换为原始)#xff1a;将响应式对象转换为普通对象#xff0c;只适用于 reactive 生成的响应式对象。markRaw(标记为原始)#xff1a;标记某个对象#xff0c;让这个对象永远都不具备响应式。一些集成的第三方库#xff0c;会有大量的…Vue3-toRaw 和 markRaw 函数
toRaw(转换为原始)将响应式对象转换为普通对象只适用于 reactive 生成的响应式对象。markRaw(标记为原始)标记某个对象让这个对象永远都不具备响应式。一些集成的第三方库会有大量的只读列表不让其具备响应式是一种性能优化。 // App.vue toRaw 函数
templateh2计数器1{{data.counter1}}/h2button clickdata.counter1计数器加1/buttonbrbutton clickgetRawObjectdata原始对象/button
/templatescript setupimport { reactive, toRaw } from vuelet data reactive({counter1 : 1})function getRawObject(){let rawObj toRaw(data)// 修改原始对象不会具有响应式rawObj.counter1console.log(原始对象, rawObj);}
/script// App.vue markRaw 函数
templateh2计数器1{{data.x}}/h2button clickdata.x.counter1计数器1加1/buttonbrbutton clickaddX扩展x属性/button
/templatescript setupimport { markRaw, reactive } from vuelet data reactive({})function addX(){// 加上markRaw可以去除响应式data.x markRaw({counter1 : 1})}
/script
