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

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

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

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

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

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

html 复制代码
<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 函数 :

html 复制代码
<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 只能添加引用数据类型,不能添加基础数据类型。

原创作者:吴小糖

创作时间:2023.11.8

相关推荐
前端世界21 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
Xiaouuuuua33 分钟前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser1 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI1 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三1 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三1 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹1 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三1 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
ningmengjing_1 小时前
在 PyCharm 中安装并配置 Node.js 的指南
开发语言·javascript·ecmascript
我是若尘2 小时前
Webpack 入门到实战 - 复习强化版
前端