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

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

有人抵觸ref?有人抵觸reactive?

來源: 責編: 時間:2024-05-07 09:10:34 171觀看
導讀一、背景這幾天看到好多文章標題都是類似于:不用 ref 的 xx 個理由不用 reactive 的 xx 個理由歷數 ref 的 xx 宗罪我就很不解,到底是什么原因導致有這兩批人:抵觸 ref 的人抵觸 reactive 的人看了這些文章,我可以總結出

JbN28資訊網——每日最新資訊28at.com

一、背景

這幾天看到好多文章標題都是類似于:JbN28資訊網——每日最新資訊28at.com

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

我就很不解,到底是什么原因導致有這兩批人:JbN28資訊網——每日最新資訊28at.com

  • 抵觸 ref 的人
  • 抵觸 reactive 的人

看了這些文章,我可以總結出他們的想法。JbN28資訊網——每日最新資訊28at.com

1.抵觸 reactive 的人

抵觸 reactive 的人,他們的想法大概就是:JbN28資訊網——每日最新資訊28at.com

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

2.抵觸 ref 的人

抵觸 ref 的人,他們的想法大概就是:JbN28資訊網——每日最新資訊28at.com

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

二、把我整笑了~

說實話,看到這些文章,有點把我整笑了,其實你要用 ref 或者 reactive 都沒錯,但是沒比必要那么抵觸,編程很多時候并不是非黑即白啊。。。JbN28資訊網——每日最新資訊28at.com

既然 Vue3 推出了 ref 和 reactive,那就說明他們都有存在的必要,在項目中不同的場景去運用他們,我覺得才是最好的,而不是用一個不用另一個,不止這兩個,還有很多其他好用的 Vue3 APIJbN28資訊網——每日最新資訊28at.com

我想針對這兩批人的想法做一個回應:JbN28資訊網——每日最新資訊28at.com

1.回應 -> 抵觸 reactive 的人

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

2.回應 -> 抵觸 ref 的人

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

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

其實在平時開發中,我覺得基本數據類型和數組,都可以用 ref 來管理,而對象的話可以使用 reactive 來管理,比如表單對象、狀態對象。JbN28資訊網——每日最新資訊28at.com

其實 Vue3 不止有這兩個 API ,還有很多其他 API ,也很好用,大家只要去靈活使用它們,能讓你的Vue3 項目上一個層次。JbN28資訊網——每日最新資訊28at.com

四、readonly

顧名思義,就是只讀的意思,如果你的數據被這個 API 包裹住的話,那么修改之后并不會觸發響應式,并且會提示警告。JbN28資訊網——每日最新資訊28at.com

JbN28資訊網——每日最新資訊28at.com

toRaw 主要用在回調傳參中,比如我封裝一個 hooks,我想要把 hooks 內維護的響應式變量轉成普通數據,當做參數傳給回調函數,可以用 toRaw。JbN28資訊網——每日最新資訊28at.com

JbN28資訊網——每日最新資訊28at.com

markRaw 可以用來標記響應式對象里的某個屬性不被追蹤,如果你的響應式對象里有某個屬性數據量比較大,但又不想被追蹤,你可以使用 markRaw。JbN28資訊網——每日最新資訊28at.com

JbN28資訊網——每日最新資訊28at.com

unref 相當于返回 ref 的 value。JbN28資訊網——每日最新資訊28at.com

JbN28資訊網——每日最新資訊28at.com

九、effectScope & onScopeDispose

effectScope 可以有兩個作用:JbN28資訊網——每日最新資訊28at.com

  • 收集副作用
  • 全局狀態管理

1.收集副作用

比如我們封裝一個共用的 hooks,為了減少頁面隱患,肯定會統一收集副作用,并且在組件銷毀的時候去統一消除,比如以下代碼:JbN28資訊網——每日最新資訊28at.com

JbN28資訊網——每日最新資訊28at.com

但是這么收集很麻煩, effectScope 能幫我們做到統一收集,并且通過 stop 方法來進行清除,且 stop 執行的時候會觸發 effectScope 內部的 onScopeDispose。JbN28資訊網——每日最新資訊28at.com

JbN28資訊網——每日最新資訊28at.com

我們可以利用 effectScope & onScopeDispose 來做一些性能優化,比如下面這個例子,我們封裝一個鼠標監聽的 hooksJbN28資訊網——每日最新資訊28at.com

JbN28資訊網——每日最新資訊28at.com

但是如果在頁面里調用多次的話,那么勢必會往 window 身上監聽很多多余的事件,造成性能負擔,所以解決方案就是,無論頁面里調用再多次 useMouse,我們只往 window 身上加一個鼠標監聽事件。JbN28資訊網——每日最新資訊28at.com

JbN28資訊網——每日最新資訊28at.com

2.全局狀態管理

現在 Vue3 最火的全局狀態管理工具肯定是 Pinia 了,那么你們知道 Pinia 的原理是什么嗎?原理就是依賴了 effectScope:JbN28資訊網——每日最新資訊28at.com

JbN28資訊網——每日最新資訊28at.com

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

vueuse 中的 createGlobalState 就是為了這個而生:JbN28資訊網——每日最新資訊28at.com

JbN28資訊網——每日最新資訊28at.com

JbN28資訊網——每日最新資訊28at.com

十、provide & inject

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

具體用法看文檔吧~https://cn.vuejs.org/guide/components/provide-inject.html。JbN28資訊網——每日最新資訊28at.com

JbN28資訊網——每日最新資訊28at.com

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

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

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

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

標簽:
  • 熱門焦點
  • 6月iOS設備好評榜:第一蟬聯榜首近一年

    作為安兔兔各種榜單里變化最小的那個,2023年6月的iOS好評榜和上個月相比沒有任何排名上的變化,僅僅是部分設備好評率的下降,長年累月的用戶評價和逐漸退出市場的老款機器讓這
  • 6月安卓手機性價比榜:Note 12 Turbo斷層式碾壓

    6月份有一個618,雖然這是京東周年慶的日子,但別的電商也都不約而同的跟進了,反正促銷沒壞處,廠商和用戶都能滿意。618期間一些產品也出現了歷史低價,那么各個價位段的產品性價比
  • 跑分安卓第一!Redmi K60至尊版8月發布!盧偉冰:目標年度性能之王

    8月5日消息,Redmi K60至尊版將于8月發布,在此前舉行的戰略發布會上,官方該機將搭載搭載天璣9200+處理器,安兔兔V10跑分超177萬分,是目前安卓陣營最高的分數
  • 印度登月最關鍵一步!月船三號今晚進入環月軌道

    8月5日消息,據印度官方消息,月船三號將于北京時間今晚21時30分左右開始近月制動進入環月軌道。這是該探測器能夠成功的最關鍵步驟之一,如果成功將開始圍
  • 28個SpringBoot項目中常用注解,日常開發、求職面試不再懵圈

    前言在使用SpringBoot開發中或者在求職面試中都會使用到很多注解或者問到注解相關的知識。本文主要對一些常用的注解進行了總結,同時也會舉出具體例子,供大家學習和參考。注解
  • Golang 中的 io 包詳解:組合接口

    io.ReadWriter// ReadWriter is the interface that groups the basic Read and Write methods.type ReadWriter interface { Reader Writer}是對Reader和Writer接口的組合,
  • 學習JavaScript的10個理由...

    作者 | Simplilearn編譯 | 王瑞平當你決心學習一門語言的時候,很難選擇到底應該學習哪一門,常用的語言有Python、Java、JavaScript、C/CPP、PHP、Swift、C#、Ruby、Objective-
  • JavaScript學習 -AES加密算法

    引言在當今數字化時代,前端應用程序扮演著重要角色,用戶的敏感數據經常在前端進行加密和解密操作。然而,這樣的操作在網絡傳輸和存儲中可能會受到惡意攻擊的威脅。為了確保數據
  • iQOO 11S評測:行業唯一的200W標準版旗艦

    【Techweb評測】去年底,iQOO推出了“電競旗艦”iQOO 11系列,作為一款性能強機,該機不僅全球首發2K 144Hz E6全感屏,搭載了第二代驍龍8平臺及144Hz電競
Top 主站蜘蛛池模板: 内乡县| 宿松县| 海阳市| 麦盖提县| 鄂托克前旗| 嘉黎县| 广水市| 辽中县| 洪雅县| 紫云| 饶河县| 上林县| 离岛区| 洪湖市| 水城县| 昌黎县| 怀仁县| 左云县| 栾城县| 武城县| 宣城市| 平阴县| 大石桥市| 饶阳县| 佛教| 广河县| 封开县| 扎鲁特旗| 秀山| 微山县| 巍山| 日喀则市| 沂南县| 遂溪县| 鸡泽县| 杭锦后旗| 龙口市| 上蔡县| 堆龙德庆县| 二连浩特市| 井研县|