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

相关推荐
灋✘逞_兇6 分钟前
Node.Js是什么?
服务器·javascript·node.js
当牛作馬28 分钟前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw040 分钟前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖43 分钟前
uniapp小程序无感刷新token
前端·小程序·uni-app
武昌库里写JAVA44 分钟前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
小飞悟1 小时前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试
绅士玖1 小时前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子1 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang1 小时前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课2 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript