---

這兩天在寫項目的時候，發現了一個之前沒用過的api，于是上網查了一下，發現這個api還是挺常用，所以在這記錄一下

什么是toRaw API？

toRaw 是 Vue 3 中的新工具，用于獲取一個響應式對象的原始對象。Vue 3 中引入了響應式代理，這意味著我們通常處理的是被代理的對象，而不是原始對象。toRaw 提供了一種方式，可以繞過代理，直接訪問和操作原始數據。

為什么需要toRaw？

在某些情況下，直接操作原始對象比操作響應式代理更有效。以下是一些常見的場景：

• 調試和日志記錄：在調試或記錄對象時，直接輸出代理對象可能會導致混淆，使用toRaw可以更清晰地看到原始數據。
• 性能優化：有時我們需要跳過代理機制進行一些性能關鍵的操作，這時toRaw可以派上用場。
• 庫和插件開發：如果你在開發Vue插件或庫，可能需要處理原始對象而不是響應式代理。

如何使用toRaw？

使用toRaw非常簡單。它是一個從vue包中導出的函數，接受一個響應式對象并返回其原始對象。以下是一個基本示例：

import { reactive, toRaw } from 'vue';const state = reactive({count: 0,nested: {message: 'Hello, Vue 3!'}
});// 獲取原始對象
const rawState = toRaw(state);console.log(rawState); // { count: 0, nested: { message: 'Hello, Vue 3!' } }// 修改原始對象不會觸發響應式更新
rawState.count = 1;
console.log(state.count); // 0// 修改響應式對象會正常工作
state.count = 2;
console.log(state.count); // 2
console.log(rawState.count); // 2

在這個示例中，我們首先創建了一個響應式對象state。然后，我們使用toRaw獲取了這個響應式對象的原始對象rawState。可以看到，對原始對象的修改不會觸發響應式更新，而對響應式對象的修改則會同步到原始對象。

實際應用場景

1、調試和日志記錄
在調試復雜的響應式對象時，直接查看代理對象可能會讓人困惑。使用toRaw可以更清晰地查看對象的實際結構。

import { reactive, toRaw } from 'vue';const state = reactive({user: {name: 'Alice',age: 25}
});
console.log(toRaw(state));

2、性能優化
在處理大量數據時，跳過響應式代理進行操作可以提高性能。例如，在大型列表的批量更新中，直接操作原始對象會更高效。

import { reactive, toRaw } from 'vue';const list = reactive([...Array(10000).keys()]);const rawList = toRaw(list);// 直接操作原始數組，提高性能
rawList.forEach((item, index) => {rawList[index] = item * 2;
});console.log(list[0]); // 0，因為沒有觸發響應式更新
console.log(rawList[0]); // 0，因為我們直接修改的是原始對象

3、庫和插件開發
在開發Vue插件或庫時，可能需要處理原始對象而不是代理對象。例如，在創建一個深拷貝函數時，使用toRaw可以避免循環引用和代理對象帶來的問題。

import { reactive, toRaw } from 'vue';function deepClone(obj) {if (obj === null || typeof obj !== 'object') {return obj;}const cloned = Array.isArray(obj) ? [] : {};for (const key in obj) {cloned[key] = deepClone(toRaw(obj[key]));}return cloned;
}const state = reactive({user: {name: 'Bob',age: 30}
});const clonedState = deepClone(state);
console.log(clonedState); // { user: { name: 'Bob', age: 30 } }

總的來說，toRaw 是 Vue 3 中一個非常有用的工具，它允許我們直接訪問和操作響應式對象的原始數據。在調試、性能優化以及庫和插件開發中，toRaw 都能發揮重要作用。通過本文的介紹，希望你對toRaw有了更深入的理解，并能在實際項目中靈活運用它。