Vue 将响应式数据转为普通对象

news2024/12/26 23:27:17

toRaw：将一个 reactive 生成的响应式数据转为普通对象。

toRaw 适用于：获取响应式数据对应的普通对象，对这个普通对象所有的操作，都不会引起页面的更新。

markRaw：标记一个对象，使其永远不会再成为响应式数据。

markRaw 适用于：当数据不会发生变化时，跳过响应式转换可以提高性能。还有一些数据不应该被设置为响应式的，例如复杂的第三方类库等。

将响应式数据转为普通数据 toRaw 函数：

<template>
    <h2>姓名：{{ info.name }}</h2>
    <button @click="info.name += '风'">修改姓名</button>
    <hr />
    <h2>年龄：{{ obj.age }}</h2>
    <button @click="obj.age++">增加年龄</button>
</template>

<script>
// 引入 toRaw 函数
import { reactive, toRaw } from 'vue'
export default {
    name: "Home",
    setup() {
        let info = reactive({
            name: "张三",
            age: 18
        })

        // 将 reactive 数据转为普通数据
        let obj = toRaw(info);
        console.log(obj);

        // 返回数据
        return { info, obj }
    }
}
</script>

注：toRaw 只能将 reactive 数据转为普通数据，不能转换 ref 数据。

在响应式数据中添加一个普通对象 markRaw 函数：

<template>
    <h2>姓名：{{ info.name }}</h2>
    <button @click="info.name += '风'">修改姓名</button>
    <hr />
    <h2>薪资：{{ info.job.money }}</h2>
    <button @click="info.job.money++">增加薪资</button>
</template>

<script>
// 引入 markRaw 函数
import { reactive, markRaw } from 'vue'
export default {
    name: "Home",
    setup() {
        let info = reactive({
            name: "张三",
        })

        // 在 info 中添加一个普通对象
        info.job = markRaw({ money: 20 });
        console.log(info);

        // 返回数据
        return { info }
    }
}
</script>

注：markRaw 只能添加引用数据类型，不能添加基础数据类型。