markRaw:
将一个对象标记为不可被转为代码,返回该对象的本身。
使用场景:
- 有些值不应该是响应式的,例如复杂的第三方类实例或Vue组件对象。
- 当呈现带有不可变数据源的大型列表时,跳过代码转换可以提高性能。
<template>
<div>
<!-- 响应式数据 -->
<div>{{ state.name }}</div>
<!-- 非响应式数据 -->
<div>{{ nonReactive.likes.join(', ') }}</div>
<div>{{ nonReactive.study.show }}</div>
<div @click="clickTest">测试按钮</div>
</div>
</template>
<script setup>
import { reactive, markRaw } from 'vue'
// 响应式数据
const state = reactive({
name: "echohye",
sex: "未知"
});
// 非响应式数据
const nonReactive = {
likes: markRaw(['吃饭', '睡觉']),
study: markRaw({ show: "show" })
};
const clickTest = () => {
nonReactive.likes[0] = '我要吃饭';
nonReactive.study.show = "show1";
};
</script>
export const enum ReactiveFlags {
skip = '__v_skip', //无需响应的对象
isReactive = '__v_isReactive', //响应式对象
isReadonly = '__v_isReadonly', //只读数据
raw = '__v_raw', //取原始对象
reactive = '__v_reactive', //用于存放响应对象,该数据被响应过就直接返回结果
readonly = '__v_readonly' //同上,存放只读对象
}