vue函数toRaw()和markRaw()怎么使用

Vue.js 是一款流行的 JavaScript 框架，用于构建用户界面。它提供了许多有用的特性和功能，其中包括 toRaw() 和 markRaw() 两个函数。这两个函数用于处理响应式对象，以及在特定情况下需要绕过数据的响应性。 首先，我们来介绍 toRaw() 函数。在 Vue 的响应式系统中，所有通过 Vue 的 data 或者 reactive API 创建的对象，都会被转换为响应式对象。而 toRaw() 函数则用于获取响应式对象的原始数据。 toRaw() 函数的使用方法非常简单。我们只需传入一个响应式对象作为参数，即可返回该对象的原始数据。以下是一个简单的示例：

import { reactive, toRaw } from 'vue';

const state = reactive({
  count: 0,
});

console.log(toRaw(state)); // { count: 0 }

在上述示例中，我们创建了一个名为 state 的响应式对象。然后，我们使用 toRaw() 函数将该响应式对象转换为其原始数据，并将其打印出来。可以看到，打印结果是一个普通的 JavaScript 对象，不再具有响应性。 接下来，让我们来了解 markRaw() 函数。在某些情况下，我们希望特定的对象不被转换为响应式对象。这时，我们可以使用 markRaw() 函数将对象标记为“非响应式”。 markRaw() 函数的使用方法也非常简单。我们只需传入一个对象作为参数，即可将该对象标记为“非响应式”。以下是一个示例：

import { reactive, markRaw } from 'vue';

const state = reactive({
  count: markRaw(() => {
    // some complex logic
    return 0;
  }),
});

console.log(state.count); // [Function anonymous]

在上述示例中，我们在 reactive 对象中使用 markRaw() 函数将 count 变量标记为“非响应式”。这意味着，该变量不会自动触发视图更新。当我们在控制台打印 state.count 时，可以看到输出的是一个函数对象，而不是预期的数字 0。 总结起来，toRaw() 和 markRaw() 是 Vue.js 提供的两个用于处理响应式对象的函数。toRaw() 函数用于获取响应式对象的原始数据，而 markRaw() 函数用于将对象标记为“非响应式”。这两个函数在特定的场景下非常有用，能够帮助我们更加灵活地处理数据的响应性。请注意，在使用这两个函数时，需要了解其使用的场景和限制，以确保代码的正确性和可维护性。