Vue markRaw

28 阅读1分钟

官网地址

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>

image.png

export const enum ReactiveFlags {
  skip = '__v_skip',              //无需响应的对象
  isReactive = '__v_isReactive',  //响应式对象
  isReadonly = '__v_isReadonly',  //只读数据
  raw = '__v_raw',      //取原始对象
  reactive = '__v_reactive',  //用于存放响应对象,该数据被响应过就直接返回结果
  readonly = '__v_readonly'   //同上,存放只读对象
}