vue函数toRaw和markRaw如何使用

前言： Vue 是一个用于构建用户界面的渐进式 JavaScript 框架，它提供了一系列的 API 和工具，用于简化开发者开发复杂的应用程序。Vue 的一个重要特性就是响应式数据，它能够自动追踪数据的变化并立即更新相应的界面。在处理一些复杂的业务场景时，我们可能会遇到需要直接操作原始数据的情况，这时就可以使用 Vue 的 toRaw 和 markRaw 来处理。 toRaw 是 Vue 的一个全局 API，它被用来获取对象的原始数据。在 Vue 的响应式系统中，对象会被包装成响应式对象，这会在对象上添加一些特殊的属性和方法。但有时我们需要直接访问对象的原始数据而不触发响应式系统的追踪和更新。toRaw 可以帮助我们做到这一点。 markRaw 则是用来标记一个对象，使其成为“原始”对象。当一个对象被标记为原始对象后，它将不会被 Vue 的响应式系统追踪和更新。这在某些特定的应用场景中是非常有用的，比如一些第三方库的对象或者一些临时对象。 正文：

使用 toRaw()

toRaw 可以用来获取包装在响应式对象内部的原始数据。通常情况下，我们不应该直接修改响应式对象的数据，而要使用 Vue 提供的 API 来操作数据。但有时我们确实需要直接操作原始数据，这时就可以使用 toRaw。

下面是一个示例，展示了如何使用 toRaw：

import { toRaw } from 'vue'

const data = reactive({
  count: 1
})

const raw = toRaw(data)
console.log(raw.count) // 输出 1

在这个示例中，我们首先使用 reactive 函数将一个普通对象变成一个响应式对象。然后使用 toRaw 函数获取这个响应式对象的原始数据，即普通的对象。然后我们可以直接访问原始数据的属性，不触发响应式系统。

使用 markRaw()

markRaw 可以用来标记一个对象为“原始”对象。被标记为原始对象的对象将不会被 Vue 的响应式系统追踪和更新。

下面是一个示例，展示了如何使用 markRaw：

import { reactive, markRaw } from 'vue'

const data = reactive({
  count: 1
})

const raw = markRaw(data)
console.log(raw.count) // 输出 1

raw.count = 2
console.log(raw.count) // 输出 2

// 这里不会触发依赖更新
data.count = 3
console.log(data.count) // 输出 1

在这个示例中，我们首先使用 reactive 函数将一个普通对象变成一个响应式对象。然后使用 markRaw 函数将这个响应式对象标记为原始对象。这样该对象就不会被响应式系统追踪和更新。我们可以直接修改原始对象的属性，不会影响到响应式对象。

总结： toRaw 和 markRaw 是 Vue 提供的全局 API，用于处理复杂场景下的原始数据操作。toRaw 可以获取响应式对象的原始数据，而 markRaw 可以将一个响应式对象标记为原始对象。对于需要直接操作原始数据或者避免被响应式系统追踪和更新的情况下，这两个函数是非常有用的工具。但是在一般情况下，我们应该尽量避免直接操作原始数据，而是使用 Vue 提供的 API 来操作数据，以便享受到 Vue 的响应式系统带来的好处。