Vue3-toRaw 和 markRaw 函数

• toRaw(转换为原始)：将响应式对象转换为普通对象，只适用于 reactive 生成的响应式对象。
• markRaw(标记为原始)：标记某个对象，让这个对象永远都不具备响应式。一些集成的第三方库，会有大量的只读列表，不让其具备响应式是一种性能优化。

// App.vue toRaw 函数
<template><h2>计数器1：{{data.counter1}}</h2><button @click="data.counter1++">计数器加1</button><br><button @click="getRawObject">data原始对象</button>
</template><script setup>import { reactive, toRaw } from 'vue'let data = reactive({counter1 : 1})function getRawObject(){let rawObj = toRaw(data)// 修改原始对象，不会具有响应式rawObj.counter1++console.log('原始对象', rawObj);}
</script>

// App.vue markRaw 函数
<template><h2>计数器1：{{data.x}}</h2><button @click="data.x.counter1++">计数器1加1</button><br><button @click="addX">扩展x属性</button>
</template><script setup>import { markRaw, reactive } from 'vue'let data = reactive({})function addX(){// 加上markRaw可以去除响应式data.x = markRaw({counter1 : 1})}
</script>