toRaw：

• 作用：将一个由reactive生成的响应式对象转为普通对象。

• 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。

markRaw：

• 作用：标记一个对象，使其永远不会再成为响应式对象。

• 应用场景:

  1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。

  2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

代码演示

        toRaw

        在代码中我们声明了一个对象  然后将对象传入reactive方法 返回一个响应式的对象 随后我们将person 响应式的对象 通过toRaw方法变回了普通对象  随后为了验证 变会的普通的对象 是不是我们最开始定义的对象 我们进行了一次输出

<template>
  <div>
    <h1>姓名：{{ p.name }}</h1>
    <h2>年龄：{{ p.age }}</h2>
    <h3>喜欢的水果：{{ p.likeFood.fruits.apple }}</h3>
    <button @click="p.name += '~'">修改姓名</button>
    <button @click="p.age++">修改年龄</button>
    <button @click="p.likeFood.fruits.apple += '！'">修改水果</button>
  </div>
</template>

<script>
import { reactive, toRaw } from "vue";
export default {
  name: "App",
  setup() {
    // 定义了一段数据
    let data = {
      name: "张三",
      age: 18,
      likeFood: {
        fruits: {
          apple: "苹果",
        },
      },
    }
    // 将普通对象变为响应对象
    let person = reactive(data);
    // 将响应对象变为普通对象
    let p = toRaw(person)

    // 打印 data 是否等于 p 
    console.log(p === data);    // true
    // 将数据返回出去
    return {
      p
    };
  },
};
</script>

        在浏览器中我们可以看到 打印信息为真 点击修改按钮 修改数据后页面也不做出响应了 

 

markRaw

        我们在代码中声明了一个响应式对象 我们现在对象上添加一属性而这个属性的值被修改之后不需要页面的更新

        我们知道直接在一个响应式的对象上添加属性也会被处理为响应式的，所以我们通过了markRaw()方法先将对象处理为一个永远不会再成为响应式对象 在添加在p对象上

<template>
  <div>
    <h1>姓名：{{ p.name }}</h1>
    <h2>年龄：{{ p.age }}</h2>
    <h3>喜欢的水果：{{ p.likeFood.fruits.apple }}</h3>
    <button @click="p.name += '~'">修改姓名</button>
    <button @click="p.age++">修改年龄</button>
    <button @click="p.likeFood.fruits.apple += '！'">修改水果</button>
  </div>
</template>

<script>
import { reactive, markRaw } from "vue";
export default {
  name: "App",
  setup() {
    // 定义了一段数据
    let p = reactive({
      name: "张三",
      age: 18,
    });
    // 在p对象上直接添加一个对象会处理为响应式的 所一使用markRaw()使其永远不会再成为响应式对象。
    p.likeFood = markRaw({
      fruits: {
        apple: "苹果",
      },
    });

    // 将数据返回出去
    return {
      p,
    };
  },
};
</script>

        我们在修改这个对象上的属性时页面就不会在触发更新了