Vue3 – toRaw 与 markRaw

简介

Vue3 提供了一种把响应式转为普通对象数据的方法 toRaw. 和永久标记为普通对象数据的方法 markRaw.

toRaw

toRaw 可以让本为响应式的对象数据转为普通不响应式的数据。toRaw 只能使 reactive 加工后的响应式数据转为普通数据，不能使 ref 加工后的响应式数据转为普通数据。

import {toRaw} from "vue";
export default {
  name: 'App',

  setup() {

    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    });

    // person 将从原来的 reactive 响应式数据，转为 普通 Object 数据
    person = toRaw(person);

    return {
      
    }
  }
}

使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面的更新。但其原来的数据依然会发生改变。

markRaw

把一个对象标记为Object普通对象,使得它永远不会成为响应式对象。

import {markRaw} from "vue";
export default {
  name: 'App',

  setup() {

    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    });

    // person 永远不会成为响应式对象
    person = markRaw(person);

    return {

    }
  }
}

应用场景：

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

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