Vue3实用技巧：详解toRaw和markRaw的应用场景，让你快速还原数据并使其不再成为Vue3中的响应式对象

部分数据来源：ChatGPT

简介

        在 Vue3 中， toRaw 和 markRaw 是两个很有用的 API，它们可以帮助我们处理数据并避免一些意外的响应式行为。下面我们来详细解析它们的使用场景。

1、toRaw

        toRaw 方法可以将一个被 reactive 包裹的对象还原为其中的“原始”对象，从而使其不再具有任何响应式能力。这样做可以帮助我们避免某些情况下意外触发了响应式更新或影响了性能等问题。

示例代码如下：

import { reactive, toRaw } from 'vue'

const state = reactive({
  count: 0
})

// 获取原始对象
const rawState = toRaw(state)

// 验证原始对象与包装后的对象是否相等
console.log(rawState === state) // false

// 改变原始对象的值
rawState.count += 1

// 验证包装后的对象是否也受到了改变
console.log(state.count) // 1

2、markRaw

        markRaw 方法可以将一个对象标记为“非响应式”，从而使其不会被 reactive 包裹，也就不会成为 Vue3 中的响应式对象。

示例代码如下：

import { reactive, markRaw } from 'vue'

const state = reactive({
  count: 0,
  obj: {
    name: '张三'
  }
})

// 标记 obj 对象为“非响应式”
markRaw(state.obj)

// obj 对象不再被 reactive 包裹
console.log(state.hasOwnProperty('__v_raw')) // false

// 赋新值时不会触发响应更新
state.obj.name = '李四'
console.log(state.obj.name) // 李四

        在上述代码中，我们通过 markRaw 方法将 state.obj 标记为非响应式对象。这样做可以避免对 obj 的修改引起意外的响应式更新。

        需要注意的是，一旦一个对象被标记为“非响应式”，它就无法再被 reactive 进行包裹成为响应式对象。所以在使用 markRaw 方法时，我们需要确保这个对象在后续的代码中不需要作为响应式对象来使用或者监听其变化。

        总之，toRaw 和 markRaw 是两个很有用的 API，在 Vue3 开发中经常会用到。toRaw 可以帮助我们还原数据并避免意外的响应式行为，markRaw 则可以让我们更加精细地控制哪些对象使用响应式并避免出现问题。