Vue3实用技巧：toRaw与markRaw的妙用

作者：半吊子全栈工匠

2024.01.17 12:32

浏览量：8

简介：在Vue3中，为了实现响应式数据，Vue会通过Object.defineProperty或Proxy对象对数据进行劫持。但在某些情况下，你可能不希望数据成为响应式对象。这时，你可以使用toRaw和markRaw这两个函数来还原数据。本文将详细介绍这两个函数的应用场景和用法。

在Vue3中，我们经常使用reactive或ref来创建响应式数据，这样当数据发生变化时，Vue能够自动检测到并重新渲染相关组件。但在某些情况下，你可能不希望数据成为响应式对象，或者你需要将非响应式数据转换为原始数据。这时，你可以使用toRaw和markRaw这两个函数。
一、toRaw函数
toRaw函数用于将响应式对象还原为其原始的非响应式版本。它的用法很简单，只需传入你想要还原的数据即可。例如：

import { reactive, toRaw } from 'vue';
const originalData = { name: 'Alice', age: 25 };
const reactiveData = reactive(originalData);
const rawData = toRaw(reactiveData);
console.log(rawData === originalData); // true

在上面的例子中，我们首先创建了一个响应式对象reactiveData，然后使用toRaw函数将其还原为原始的非响应式对象rawData。可以看到，rawData与originalData是同一个对象，只是不再是响应式对象。
二、markRaw函数
与toRaw相反，markRaw函数用于将非响应式对象标记为响应式对象。这意味着，当原始数据发生变化时，Vue能够检测到并重新渲染相关组件。但是，需要注意的是，Vue不会自动为原始对象添加getter和setter，这意味着你不能直接在原始对象上使用计算属性或监视器。如果你需要使用这些特性，你需要手动使用reactive或ref来创建响应式数据。例如：

import { markRaw } from 'vue';
const originalData = { name: 'Alice', age: 25 };
const reactiveData = markRaw(originalData);
// 注意：markRaw不会自动添加getter和setter，所以你不能直接在reactiveData上使用计算属性或监视器。

在上面的例子中，我们使用markRaw函数将非响应式对象originalData标记为响应式对象reactiveData。但是，与toRaw不同的是，Vue不会自动为原始对象添加getter和setter，所以你不能直接在原始对象上使用计算属性或监视器。如果你需要这些特性，你需要手动使用reactive或ref来创建响应式数据。
三、应用场景

当你希望避免数据成为Vue的响应式对象时，可以使用toRaw函数。例如，当你希望将一个响应式对象传递给一个只接受非响应式对象的第三方库时，你可以先使用toRaw函数将其还原为非响应式对象。
当你需要将一个非响应式对象转换为Vue的响应式对象时，可以使用markRaw函数。例如，当你从服务器获取数据并将其存储在非响应式对象中时，你可以使用markRaw函数将其转换为Vue的响应式对象，以便于后续的数据操作和组件渲染。
总结：在Vue3中，使用toRaw和markRaw函数可以帮助你在需要时将数据还原为原始的非响应式对象或将其转换为Vue的响应式对象。通过合理地使用这两个函数，你可以更好地控制数据的响应性和非响应性，以满足你的实际需求。

Vue3实用技巧：toRaw与markRaw的妙用

最热文章