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>