← 返回首页
Vue3基础教程(三十)
发表时间:2021-08-12 22:15:49
toRaw和markRaw

1.toRaw - 返回由 reactive 或 readonly 方法转换成响应式代理的普通对象。 - 这是一个还原方法,可用于临时读取,访问不会被代理/跟踪,写入时也不会触发界面更新。

2.markRaw - 标记一个对象,使其永远不会转换为代理。返回对象本身。

应用场景: - 有些值不应被设置为响应式的,例如复杂的第三方类实例或 Vue 组件对象。 - 当渲染具有不可变数据源的大列表时,跳过代理转换可以提高性能。

实例:

<template>
    <h2>toRaw和markRaw</h2>
    <h3>user: {{user}}</h3>
    <button @click="changeToRaw">测试toRaw</button>
    <br>
    <button @click="changeToMarkRaw">测试markRaw</button>
    <br>
</template>

<script lang="ts">
    import {reactive,  toRaw, markRaw} from 'vue'

    export default {
        setup() {
            let user = reactive({name: 'zhangsan', age: 20, car: {brand: 'BMW'}})
            const changeToRaw = () => {
                //user.name = "李四";
                user = toRaw(user);
                user.name = '李四';
            }
            const changeToMarkRaw = () => {
                //标记car为普通对象,永远不会转换为代理对象。
                user.car = markRaw( {brand:'TOYOTA'});
                //user.car= {brand:'ford'};
                setTimeout(() => {
                    user.car.brand= 'ford'
                }, 1000)
            }
            return {
                user,
                changeToRaw,
                changeToMarkRaw
            }
        }
    }
</script>