Vue3-toRaw 和 markRaw 函数

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>