Vue3 toRaw 和 markRaw

一、toRaw

我们可以使用ref 和 reactive 将普通对象类型的数据变为响应式的数据。

我们可以使用toRaw 将reactive 对象的数据变为一般对象类型的数据。

使用toRaw 需要先进行引入：

import { toRaw } from 'vue';

语法格式：

const xxx = toRaw(数据) 

setup() {
  let person = reactive({
    name: "张三",
    job: {
      type:"前端"
    }
  })
 
  person = toRaw(person);
 
  return {
    num,
    person
  };
},

注意：toRaw不能用在ref 对象上，如果用在ref 对象上将不起作用

二、markRaw

markRaw是将一个对象标记为普通对象，而toRaw是将reactive对象变为普通对象。

多用于我们给对象添加了一个新的对象，但是我们不需要使用该对象的响应式，让他作为一个普通对象就行。（如果不适用markRaw，新添加进reactive对象中的属性都会有响应式）

使用markRaw 需要先进行引入：

import { markRaw} from 'vue';

语法格式：

const xxx = markRaw(对象) 

setup() {
  let person = reactive({
    name: "张三",
    job: {
      type:"前端"
    }
  })
 
  function addMessage() {
    const family = { mather: "李四", father: "张老大" };
    person.family = markRaw(family);
  }
 
  return {
    num,
    person
  };
},

 还可以用于引入第三方库但是为不需要其为响应式的场景。