vue函数对比：toRaw()和markRaw()的使用

前言：

Vue是一种流行的JavaScript框架，用于构建用户界面。它提供了许多函数和工具来方便地操作和管理数据。在Vue 3中，toRaw()和markRaw()是两个常用的函数，用于处理响应式数据。本文将深入探讨这两个函数的使用方法和使用场景。

toRaw()函数：

toRaw()函数是Vue 3中引入的新函数，用于获取响应式对象的原始值。它的作用是将响应式对象转换为普通的JavaScript对象，从而绕过Vue的响应式系统。这可以用于对某些数据进行特殊处理，或者在需要时临时解除响应式绑定。

import { reactive, toRaw } from 'vue';

const obj = reactive({ name: 'John', age: 30 });
const rawObj = toRaw(obj);

console.log(rawObj.name); // Output: 'John'

// 修改原始对象，不会触发响应
rawObj.name = 'Tom';
console.log(obj.name); // Output: 'John'

在上面的示例中，我们使用reactive()函数创建了一个响应式对象obj，然后使用toRaw()函数获取了obj的原始值，即rawObj。通过rawObj，我们可以直接修改原始对象的值，而不会触发Vue的响应式更新。

需要注意的是，使用toRaw()函数获取的原始值不会保留响应式特性，即对rawObj的修改不会触发界面的重新渲染。因此，我们应该在确保不需要响应式特性的情况下使用toRaw()函数。

markRaw()函数：

markRaw()函数也是Vue 3中引入的新函数，用于标记一个对象，使其成为非响应式的。它的作用是告诉Vue不要将这个对象转换为响应式对象，从而提高性能并避免不必要的响应式更新。

import { reactive, markRaw } from 'vue';

const obj = reactive({ name: 'John', age: 30 });
const nonReactiveObj = markRaw(obj);

console.log(nonReactiveObj.name); // Output: 'John'

// 修改对象，不会触发响应
nonReactiveObj.name = 'Tom';
console.log(obj.name); // Output: 'Tom'

在上面的示例中，我们使用reactive()函数创建了一个响应式对象obj，然后使用markRaw()函数将obj标记为非响应式的，即nonReactiveObj。通过nonReactiveObj，我们可以直接修改对象的值，而不会触发Vue的响应式更新。

需要注意的是，对于通过markRaw()标记为非响应式的对象，不仅对象本身是非响应式的，它的属性也都是非响应式的。这意味着无论对标记对象的任何修改，都不会触发界面的重新渲染。

总结：

toRaw()和markRaw()是Vue 3中提供的两个重要的函数，用于处理响应式数据。toRaw()函数用于获取响应式对象的原始值，以绕过Vue的响应式系统，可以对该值进行特殊处理或解除响应式绑定。markRaw()函数用于标记一个对象为非响应式的，以提高性能并避免不必要的响应式更新。

toRaw()和markRaw()函数在某些特定的场景下非常有用，但在正常开发中应谨慎使用。因为过度使用这些函数可能会导致代码难以理解和维护。在大多数情况下，我们应该依赖Vue的响应式系统来管理数据，并遵循Vue的最佳实践。

希望本文能帮助你理解toRaw()和markRaw()函数的使用方法和使用场景，并在实际开发中正确地应用它们。