快捷導(dǎo)航

Vue 3中toRaw和markRaw的使用教程

更新時(shí)間：2023年10月26日 10:43:29 作者：IT·陳寒

toRaw和markRaw是Vue 3中引入的新API,用于更精細(xì)地控制對(duì)象的代理和響應(yīng)性,它們提供了在需要時(shí)繞過代理或禁用響應(yīng)性的能力,有助于提高性能和更好地與第三方庫進(jìn)行集成,本文給大家介紹Vue 3中toRaw和markRaw的使用,感興趣的朋友一起看看吧

Vue是一個(gè)流行的JavaScript框架，廣泛用于構(gòu)建現(xiàn)代Web應(yīng)用程序。Vue 3引入了一些新的響應(yīng)性API，其中包括toRaw和markRaw。這些API允許您更精細(xì)地控制Vue的響應(yīng)性系統(tǒng)。本文將深入探討toRaw和markRaw的使用，以及它們?nèi)绾螏椭玫毓芾砟腣ue 3應(yīng)用程序。

Vue 3的響應(yīng)性系統(tǒng)

在Vue 3中，響應(yīng)性系統(tǒng)是構(gòu)建動(dòng)態(tài)Web應(yīng)用程序的關(guān)鍵部分。Vue使用響應(yīng)性系統(tǒng)來跟蹤依賴關(guān)系，使數(shù)據(jù)更改能夠自動(dòng)更新視圖。這使得Vue應(yīng)用程序在數(shù)據(jù)變化時(shí)能夠高效地更新DOM。Vue 3引入了新的Proxy對(duì)象來替代Vue 2中的Object.defineProperty。Proxy對(duì)象允許更細(xì)粒度的攔截和控制屬性的訪問和修改。這使得Vue的響應(yīng)性系統(tǒng)更加靈活和高效。然而，有時(shí)候過于靈活也可能導(dǎo)致問題。Vue的響應(yīng)性系統(tǒng)可能會(huì)在某些情況下過度追蹤依賴，這可能會(huì)導(dǎo)致不必要的性能開銷。為了解決這個(gè)問題，Vue 3引入了toRaw和markRaw這兩個(gè)新的API。

使用toRaw

toRaw是Vue 3中的一個(gè)全局函數(shù)，它接受一個(gè)reactive或ref對(duì)象，并返回該對(duì)象的原始不代理版本。這個(gè)函數(shù)非常有用，當(dāng)您需要直接訪問對(duì)象的原始版本而不觸發(fā)代理的getter方法時(shí)?？紤]以下示例：javascriptimport { reactive, toRaw } from 'vue';const original = { name: 'John' };const proxy = reactive(original);console.log(proxy.name); // Johnconsole.log(toRaw(proxy).name); // John在這個(gè)示例中，我們首先創(chuàng)建了一個(gè)名為original的普通JavaScript對(duì)象。然后，我們使用reactive將其轉(zhuǎn)換為代理對(duì)象proxy。最后，我們使用toRaw來獲取proxy的原始版本，從而繞過了代理。這種操作可能在某些情況下非常有用，特別是當(dāng)您需要與不理解Vue的第三方庫或原生DOM操作進(jìn)行交互時(shí)。通過使用toRaw，您可以確保您訪問的是對(duì)象的真實(shí)版本。

使用markRaw

markRaw是另一個(gè)全局函數(shù)，它用于標(biāo)記一個(gè)對(duì)象，使其永遠(yuǎn)不會(huì)被代理。這在需要排除特定對(duì)象的響應(yīng)性時(shí)非常有用，因?yàn)樗梢燥@著提高性能。以下是markRaw的使用示例：javascriptimport { reactive, markRaw } from 'vue';const original = markRaw({ name: 'John' });const proxy = reactive(original);console.log(proxy.name); // Johnproxy.name = 'Doe'; // This will not trigger reactivity在這個(gè)示例中，我們使用markRaw來創(chuàng)建一個(gè)原始對(duì)象original，它不會(huì)被代理。然后，我們使用reactive將其轉(zhuǎn)換為代理對(duì)象proxy。但是請(qǐng)注意，盡管proxy是響應(yīng)性的，但original的修改不會(huì)觸發(fā)代理的更新。這對(duì)于標(biāo)記不需要響應(yīng)性的對(duì)象非常有用，以減少不必要的性能開銷。

使用場景

下面我們將討論一些toRaw和markRaw的實(shí)際使用場景。

1. 與第三方庫交互

當(dāng)您需要將Vue應(yīng)用程序與不支持Vue的第三方庫或原生瀏覽器API集成時(shí)，toRaw和markRaw非常有用。您可以使用toRaw訪問Vue代理對(duì)象的原始版本，以便與這些庫進(jìn)行交互。

2. 提高性能

有些對(duì)象可能不需要響應(yīng)性。例如，靜態(tài)配置對(duì)象或緩存數(shù)據(jù)通常不需要被Vue的響應(yīng)性系統(tǒng)追蹤。通過使用markRaw標(biāo)記這些對(duì)象，您可以減少不必要的性能開銷。

3. 避免無限循環(huán)

有時(shí)代理對(duì)象的遞歸引用可能導(dǎo)致無限循環(huán)，這會(huì)占用大量內(nèi)存并導(dǎo)致程序崩潰。使用markRaw可以防止這種情況的發(fā)生。

總結(jié)

toRaw和markRaw是Vue 3中引入的新API，用于更精細(xì)地控制對(duì)象的代理和響應(yīng)性。它們提供了在需要時(shí)繞過代理或禁用響應(yīng)性的能力，有助于提高性能和更好地與第三方庫進(jìn)行集成。理解如何正確使用這些API對(duì)于構(gòu)建高性能和靈活的Vue 3應(yīng)用程序非常重要。根據(jù)您的具體需求，您可以選擇是繞過代理對(duì)象，提高性能，還是禁用響應(yīng)性，以便更好地管理您的應(yīng)用程序狀態(tài)。希望本文能幫助您更好地理解toRaw和markRaw的使用。

到此這篇關(guān)于Vue 3中toRaw和markRaw的使用的文章就介紹到這了,更多相關(guān)Vue 3 toRaw和markRaw使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: