Vue3 除了Ref、Reactive還有哪些東西

哈嘍，大家好 我是 xy???????。使用 Vue3，如果你只會使用 Ref、Reactive，那你真的就該 Out 了！?。?/p>

前言

最近團隊的工作相對較少，我決定利用閑暇時間對代碼進行審查和優(yōu)化。

在此過程中，我發(fā)現(xiàn)了一個令我驚訝的現(xiàn)象：在項目中 99% 的響應式變量聲明都使用了 Ref 或 Reactive。

雖然這兩個 API 在大多數(shù)場景下都能滿足需求，但在某些特定場景下，它們可能并非最佳選擇。

為了提升代碼質(zhì)量和性能，我們可以針對這些特殊場景進行優(yōu)化。

優(yōu)化場景

比如：在處理龐大數(shù)據(jù)集或嵌套對象時，我們往往只需對特定屬性進行響應式處理，而無需將整個對象轉(zhuǎn)換為響應式。

這個時候如果你死磕 Ref、Reactive 雖然也能實現(xiàn)功能，但是會觸發(fā)大量不必要的響應式轉(zhuǎn)換和更新，試想一下，如果數(shù)據(jù)量足夠的龐大，勢必會造成很大的性能開銷問題。

為了解決這個問題，向大家推薦 Vue3 中的兩個實用 API：shallowRef 和 shallowReactive。

這兩個方法在處理響應式數(shù)據(jù)時，為我們提供了更好的靈活性和性能。

在 Vue3 中，shallowRef 和 shallowReactive 是兩個非常有用的方法，它們幫助我們在處理響應式數(shù)據(jù)時更加靈活和高效

shallowRef：

用于創(chuàng)建一個只追蹤引用的響應式引用。

當你只需要對一個對象的某個屬性進行響應式處理時，shallowRef 是一個很好的選擇。

這樣，Vue3 只會追蹤該屬性的變化，而不對整個對象進行深度響應式處理，從而降低性能開銷。

shallowReactive：

與 shallowRef 類似，但適用于對象。

當你需要對一個大對象的某個屬性進行響應式處理時，可以使用 shallowReactive。

這可以確保 Vue3 只對該屬性進行響應式追蹤，而不影響整個對象。

通過使用 shallowRef 和 shallowReactive，我們可以在處理大量數(shù)據(jù)或嵌套對象時，實現(xiàn)更加高效且靈活的響應式處理，從而提高應用程序的性能。

shallowRef 使用場景

shallowRef 是一個創(chuàng)建響應式對象的函數(shù)，與 ref 不同之處在于，shallowRef 只會在對象的外層進行響應式處理（只有對 .value 的訪問是響應式的）。這意味著當對象的深層屬性發(fā)生變化時，不會觸發(fā)視圖更新，從而提高了性能。

import { shallowRef } from 'vue';

const user = shallowRef({
  name: 'xy',
  address: {
    city: 'China',
    email: '[email protected]'
  }
});

// 修改深層屬性，不會觸發(fā)視圖更新
user.value.address.city = 'Japan';
// 修改深層屬性，不會觸發(fā)視圖更新
user.value.name = '前端開發(fā)愛好者'

// 對 .value 的訪問會觸發(fā)試圖更新
user.value = {
  name: '前端開發(fā)愛好者',
  address: {
    city: 'China',
    email: '[email protected]'
  }
};

shallowReactive 使用場景

與 shallowRef 類似，shallowReactive 用于創(chuàng)建一個淺層響應式的對象。與 reactive 不同，shallowReactive 只會對對象的第一層屬性進行響應式處理，不會遞歸地將對象內(nèi)部的屬性都變成響應式。

import { shallowReactive } from 'vue';

const user = shallowReactive({
  name: 'xy',
  address: {
    city: 'China',
    email: '[email protected]'
  }
});

// 修改深層屬性，不會觸發(fā)視圖更新
user.address.city = 'Japan';

// 修改淺層屬性，會觸發(fā)視圖更新
user.name = '前端開發(fā)愛好者'

優(yōu)勢

• 性能優(yōu)化：在處理大型數(shù)據(jù)集或嵌套對象時，運用 shallowRef 類似，shallowReactive 可有效提升性能，防止不必要的響應式轉(zhuǎn)換及更新操作。

• 避免無限循環(huán)：當數(shù)據(jù)模型存在相互引用關系時，shallowRef 類似，shallowReactive 能助你規(guī)避創(chuàng)建無限循環(huán)的響應式數(shù)據(jù)結構。

• 更精細的控制：若只需關注對象的第一層屬性，并避免觸發(fā)深層次更新，shallowRef 類似，shallowReactive 可提供更為精細的控制能力。

shallowRef 類似，shallowReactive 的性能優(yōu)勢在于避免了深層對象的遞歸偵聽，進而降低了響應式系統(tǒng)觸發(fā)的頻率。這對大型項目和復雜數(shù)據(jù)結構而言極具價值。

深入了解它們的使用方法和性能優(yōu)勢，可讓我們更好地運用 Vue3 的響應式系統(tǒng)。請始終牢記，在利用這些特性時，需根據(jù)具體場景平衡性能與開發(fā)便利性，確保代碼保持簡潔、易讀及易于維護。

寫在最后

公眾號：前端開發(fā)愛好者 專注分享 web 前端相關技術文章、視頻教程資源、熱點資訊等，如果喜歡我的分享，給 ???? 點一個贊 ?? 或者 ?關注 都是對我最大的支持。

歡迎長按圖片加好友，我會第一時間和你分享前端行業(yè)趨勢，面試資源，學習途徑等等。

添加好友備注【進階學習】拉你進技術交流群

關注公眾號后，在首頁：

• 回復 面試題，獲取最新大廠面試資料。
• 回復 簡歷，獲取 3200 套 簡歷模板。
• 回復 React 實戰(zhàn)，獲取 React 最新實戰(zhàn)教程。
• 回復 Vue 實戰(zhàn)，獲取 Vue 最新實戰(zhàn)教程。
• 回復 ts，獲取 TypeScript 精講課程。
• 回復 vite，獲取 Vite 精講課程。
• 回復 uniapp，獲取 uniapp 精講課程。
• 回復 js 書籍，獲取 js 進階 必看書籍。
• 回復 Node，獲取 Nodejs+koa2 實戰(zhàn)教程。
• 回復 數(shù)據(jù)結構算法，獲取數(shù)據(jù)結構算法教程。
• 回復 架構師，獲取 架構師學習資源教程。
• 更多教程資源應有盡有，歡迎 關注獲取。