toRaw 和 markRaw 函数

toRaw 函数

用于将响应式数据，封装后的数据转换为最原始的数据，没有进行包装过的数据

import { reactive, toRaw } from "vue";
export default {
  setup() {
    let a = reactive({
      b: 1,
      c: {
        d: 4,
      },
    });

    //将响应式的数据，经过Proxy处理过的数据，转换为原始的 Object 格式数据
    const b = toRaw(a);

    return { a, b };
  },
};

只能用于将 reactive 定义的响应式数据转为原始的对象格式，即转换为未经响应式包装处理过的原始数据。而对于 ref 定义的响应式数据无法进行处理，处理的结果为 undefined

markRaw 函数

将某个数据标记为原始数据。
使某一项后添加的数据不做响应式的包装处理，只是将该数据当做普通数据进行使用

import { reactive, markRaw } from "vue";
export default {
  setup() {
    let a = reactive({
      b: 1,
      c: {
        d: 4,
      },
    });

    //此处，指定新增的数据 d 为普通数据，不进行响应式数据的转换
    a.d = markRaw({
      e: 4,
      f: {
        g: 6,
      },
    });

    return { a, b };
  },
};

当数据只用于展示时，可指定使用 markRaw 将数据标记为普通数据，跳过响应式数据的转换，节省对数据进行转换而产生的性能问题

# toRaw 和 markRaw 函数

toRaw 和 markRaw 函数