Vue3-toRaw 和 markRaw 函数

最新推荐文章于 2024-11-01 10:44:44 发布

南瓜骨头

最新推荐文章于 2024-11-01 10:44:44 发布

阅读量950

点赞数 10

分类专栏： Vue 文章标签： javascript 前端前端框架 vue

本文链接：https://blog.csdn.net/weixin_47957908/article/details/134674443

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章介绍了Vue3中的toRaw函数用于将响应式对象转换为非响应式，便于性能优化，而markRaw则用于永久标记对象使其不具响应性。通过实例展示了如何在模板和脚本中使用这两个功能来管理应用的响应式状态。

摘要由CSDN通过智能技术生成

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>