VUE框架Vue3使用toRaw和markRaw标记为原始和转换为原始对项目效率进行优化------VUE框架

<template>
    <h1>{{ counter1 }}</h1>
    <hr>
    <h1>{{ data.x }}</h1>
    <button @click="counter1++">加加</button>
    <hr>
    <button @click="data.x.counter2++">新属性加加</button>
    <hr>
    <button @click="getRawObject">获取原始对象</button>
    <hr>
    <button @click="add">拓展属性</button>
</template>
 
<script>
import { markRaw, reactive, toRaw, toRefs } from 'vue'
export default {
    name : "App",
    setup(){
        let data = reactive({
            // 这里的原始对象的值也被修改了
            counter1 : 1
        });
        // 获取响应式对象的原始对象
        // 操作这个对象没有响应式处理
        function getRawObject(){
            let rawObj = toRaw(data);
            rawObj.counter1++;
            // 原始对象也关联我们初始的这个对象的,修改的时候也被修改了
            console.log(rawObj);
            // 修改原始对象没有响应式
        }
        function add(){
            // 是响应式的,因为我们底层添加也是调用的set方法
            // 以Proxy代理对象的形式执行了set方法
            // 因此是具有响应式的
            // 标记为markRaw后这个属性就是原始对象了,不具有响应式
            // 底层也没有创建Proxy对象,极大的提升了效率
            data.x = markRaw({
                counter2 : 100
            });
        }
        return {
            data,
            getRawObject,
            add,
            ...toRefs(data)
        };
    }
}
</script>
 
<style>
 
</style>