查看本系列文章合集click me
下载本系列文章源码click me
toRaw: 将一个响应式对象转为普通对象
markRaw: 标记一个对象,让它永远不会转为响应式对象,返回值是这个对象本身
- 应用场景
- 有些值不应被设置为响应式的,例如复杂的第三方类实例或 Vue 组件对象。
- 当渲染具有不可变数据源的大列表时,跳过代理转换可以提高性能。
<template>
<div id="app"></div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRaw, markRaw } from "vue";
export default defineComponent({
setup() {
/* toRaw */
const userInfo = reactive({
name: "温情key",
age: 23,
});
const toRawInfo = toRaw(userInfo);
console.log(userInfo);
console.log(toRawInfo);
/* markRaw */
const obj = {
name: '温情key'
};
// 标记不能转换为响应式
let markObj = markRaw(obj);
// 尝试转换为响应式
let reactiveObj = reactive(markObj);
console.log(reactiveObj);
return {
userInfo,
toRawInfo,
reactiveObj
};
},
});
</script>
可以看到第二个log toRawInfo
已经转换为了普通对象,也就是说,它就已经具有响应性了。
第三个log reactiveObj
使用 reactive 依旧没把他转换为响应式对象,因为它已经被标记为不可响应对象。