當前位置：首頁 > 科技 > 軟件

有人抵觸ref？有人抵觸reactive？

來源：責編：時間：2024-05-07 09:10:34 152觀看

導讀一、背景這幾天看到好多文章標題都是類似于：不用 ref 的 xx 個理由不用 reactive 的 xx 個理由歷數 ref 的 xx 宗罪我就很不解，到底是什么原因導致有這兩批人：抵觸 ref 的人抵觸 reactive 的人看了這些文章，我可以總結出

一、背景

這幾天看到好多文章標題都是類似于：

不用 ref 的 xx 個理由
不用 reactive 的 xx 個理由
歷數 ref 的 xx 宗罪

我就很不解，到底是什么原因導致有這兩批人：

抵觸 ref 的人
抵觸 reactive 的人

看了這些文章，我可以總結出他們的想法。

1.抵觸 reactive 的人

抵觸 reactive 的人，他們的想法大概就是：

Vue 官方推薦 ref
reactive 有類型限制，ref 沒有
reactive 使用不當會丟失響應式，比如解構
reactive 無法修改整個對象的值

2.抵觸 ref 的人

抵觸 ref 的人，他們的想法大概就是：

ref 的底層其實就是 reactive，用 ref 相當于多了一層，耗費性能
ref 的 .value 用起來很麻煩，增加使用者心里負擔
ref 到模板的時候會解掉 value 這一層，這時候也會耗費性能

二、把我整笑了~

說實話，看到這些文章，有點把我整笑了，其實你要用 ref 或者 reactive 都沒錯，但是沒比必要那么抵觸，編程很多時候并不是非黑即白啊。。。

既然 Vue3 推出了 ref 和 reactive，那就說明他們都有存在的必要，在項目中不同的場景去運用他們，我覺得才是最好的，而不是用一個不用另一個，不止這兩個，還有很多其他好用的 Vue3 API

我想針對這兩批人的想法做一個回應：

1.回應 -> 抵觸 reactive 的人

官方是推薦，不是抵觸
reactive 既然有類型限制，那就在特定時候用 reactive 就行
使用不當會丟失響應式？那就是開發者對于 Vue3 API 的使用還不熟
用 Object.assign 就可以修改整個對象的值

2.回應 -> 抵觸 ref 的人

耗費性能的話，這么久了，也沒人貼出到底耗費了多少性能？
value 不麻煩，我覺得 .value 可以起到辨別響應式和非響應式數據的效果，而且現在編輯器都有插件提供的代碼補全了，多個 .value 也花不了多少時間吧？

三、靈活使用 Vue3 API 才是王道

其實在平時開發中，我覺得基本數據類型和數組，都可以用 ref 來管理，而對象的話可以使用 reactive 來管理，比如表單對象、狀態對象。

其實 Vue3 不止有這兩個 API ，還有很多其他 API ，也很好用，大家只要去靈活使用它們，能讓你的Vue3 項目上一個層次。

四、readonly

顧名思義，就是只讀的意思，如果你的數據被這個 API 包裹住的話，那么修改之后并不會觸發響應式，并且會提示警告。

toRaw 主要用在回調傳參中，比如我封裝一個 hooks，我想要把 hooks 內維護的響應式變量轉成普通數據，當做參數傳給回調函數，可以用 toRaw。

markRaw 可以用來標記響應式對象里的某個屬性不被追蹤，如果你的響應式對象里有某個屬性數據量比較大，但又不想被追蹤，你可以使用 markRaw。

unref 相當于返回 ref 的 value。

九、effectScope & onScopeDispose

effectScope 可以有兩個作用：

收集副作用
全局狀態管理

1.收集副作用

比如我們封裝一個共用的 hooks，為了減少頁面隱患，肯定會統一收集副作用，并且在組件銷毀的時候去統一消除，比如以下代碼：

但是這么收集很麻煩， effectScope 能幫我們做到統一收集，并且通過 stop 方法來進行清除，且 stop 執行的時候會觸發 effectScope 內部的 onScopeDispose。

我們可以利用 effectScope & onScopeDispose 來做一些性能優化，比如下面這個例子，我們封裝一個鼠標監聽的 hooks

但是如果在頁面里調用多次的話，那么勢必會往 window 身上監聽很多多余的事件，造成性能負擔，所以解決方案就是，無論頁面里調用再多次 useMouse，我們只往 window 身上加一個鼠標監聽事件。

2.全局狀態管理

現在 Vue3 最火的全局狀態管理工具肯定是 Pinia 了，那么你們知道 Pinia 的原理是什么嗎？原理就是依賴了 effectScope：

所以我們完全可以自己使用 effectScope 來實現自己的局部狀態管理，比如我們封裝一個通用組件，這個組件層級比較多，并且需要共享一些數據，那么這個時候肯定不會用 Pinia 這種全局狀態管理，而是會自己寫一個局部的狀態管理，這個時候 effectScope 就可以排上用場了。

vueuse 中的 createGlobalState 就是為了這個而生：

十、provide & inject

Vue3 用來提供注入的 API，主要是用在組件的封裝，比如那種層級較多的組件，且子組件需要依賴父組件甚至爺爺組件的數據，那么可以使用 provide & inject，最典型的例子就是 Form 表單組件，可以去看看各個組件庫的源碼，表單組件大部分都是用 provide & inject 來實現的，比如 Form、Form-Item、Input這三個需要互相依賴對方的規則、字段名、字段值，所以用 provide & inject 會更好。

具體用法看文檔吧~https://cn.vuejs.org/guide/components/provide-inject.html。

本文鏈接：http://www.www897cc.com/showinfo-26-86995-0.html有人抵觸ref？有人抵觸reactive？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Go 中間件的優雅實現：處理請求的藝術

下一篇：微服務架構中的挑戰及應對方式：Outbox 模式

標簽：

熱門焦點

Find N3入網：最高支持16+1TB

OPPO將于近期登場的Find N3折疊屏目前已經正式入網，型號為PHN110。本次Find N3在外觀方面相比前兩代有很大的變化，不再是小號的橫向折疊屏，而是跟別的廠商一樣采用了較為常見的
MIX Fold3包裝盒泄露新機本月登場

小米的全新折疊屏旗艦MIX Fold3將于本月發布，近日該機的真機包裝盒在網上泄露。從圖上來看，新的MIX Fold3包裝盒在外觀設計方面延續了之前的方案，變化不大，這也是目前小米旗艦
7月安卓手機好評榜：三星S23Ultra好評率第一

性能榜和性價比榜之后，我們來看最后的安卓手機好評榜，數據來源安兔兔評測，收集時間2023年7月1日至7月31日，僅限國內市場。第一名：三星Galaxy S23 Ultra好評率：95.71%在即將迎來新
6月iOS設備好評榜：第一蟬聯榜首近一年

作為安兔兔各種榜單里變化最小的那個，2023年6月的iOS好評榜和上個月相比沒有任何排名上的變化，僅僅是部分設備好評率的下降，長年累月的用戶評價和逐漸退出市場的老款機器讓這
一篇聊聊Go錯誤封裝機制

%w 是用于錯誤包裝（Error Wrapping）的格式化動詞。它是用于 fmt.Errorf 和 fmt.Sprintf 函數中的一個特殊格式化動詞，用于將一個錯誤（或其他可打印的值）包裝在一個新的錯誤中。使
十個簡單但很有用的Python裝飾器

裝飾器（Decorators）是Python中一種強大而靈活的功能，用于修改或增強函數或類的行為。裝飾器本質上是一個函數，它接受另一個函數或類作為參數，并返回一個新的函數或類。它們通常用
三言兩語說透柯里化和反柯里化

JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是兩種很有用的技術，可以幫助我們寫出更加優雅、泛用的函數。本文將首先介紹柯里化和反柯里化的概念、實現原理和應用
每天一道面試題-CPU偽共享

前言：了不起：又到了每天一到面試題的時候了！學弟，最近學習的怎么樣啊了不起學弟：最近學習的還不錯，每天都在學習，每天都在進步！了不起：那你最近學習的什么呢？了不起學弟：最近在學習C
支持aptX Lossless無損傳輸 iQOO TWS 1賽道版發布限時優惠價369元

2023年7月4日，“無損音質，聲動人心”iQOO TWS 1正式發布，支持aptX Lossless無損傳輸，限時優惠價369元。iQOO TWS 1耳機率先支持端到端aptX Lossless無

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

有人抵觸ref？有人抵觸reactive？