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

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

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

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

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

一、背景

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

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

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

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

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

1.抵觸 reactive 的人

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

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

2.抵觸 ref 的人

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

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

二、把我整笑了~

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

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

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

1.回應 -> 抵觸 reactive 的人

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

2.回應 -> 抵觸 ref 的人

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

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

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

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

四、readonly

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

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

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

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

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

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

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

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

九、effectScope & onScopeDispose

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

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

1.收集副作用

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

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

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

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

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

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

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

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

2.全局狀態管理

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

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

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

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

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

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

十、provide & inject

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

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

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

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

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

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

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

標簽:
  • 熱門焦點
Top 日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不
亚洲欧美经典视频| 狠狠久久五月精品中文字幕| 欧美国产日本| 欧美日韩国产小视频在线观看| 欧美日韩精品一区| 国产女主播一区二区三区| 黄网站色欧美视频| 日韩午夜剧场| 亚洲免费中文字幕| 久久精品99国产精品| 欧美黄色网络| 欧美日韩国产片| 国产视频一区在线| 亚洲国产成人一区| 亚洲午夜精品视频| 久久婷婷久久一区二区三区| 欧美—级高清免费播放| 国产精品一区二区女厕厕| 在线免费高清一区二区三区| 夜夜爽99久久国产综合精品女不卡| 亚洲你懂的在线视频| 老司机久久99久久精品播放免费| 欧美日韩亚洲一区三区| 韩国av一区二区| 一本色道久久综合狠狠躁篇的优点| 亚洲欧美日韩人成在线播放| 蜜桃av噜噜一区二区三区| 欧美视频中文字幕| 在线精品高清中文字幕| 亚洲一区三区电影在线观看| 蜜臀av性久久久久蜜臀aⅴ| 国产精品yjizz| 亚洲福利免费| 性做久久久久久久免费看| 欧美激情视频一区二区三区免费 | 国产精品久久久久av免费| 伊人影院久久| 亚洲欧美日韩天堂| 欧美日产一区二区三区在线观看 | 亚洲激情av| 久久不射网站| 国产精品护士白丝一区av| 亚洲电影免费在线观看| 欧美一级夜夜爽| 欧美三级欧美一级| 亚洲欧洲日本一区二区三区| 久久精品国产成人| 国产精品欧美日韩久久| 日韩一区二区福利| 欧美成人性网| 黄色一区二区三区| 午夜老司机精品| 欧美日韩亚洲一区| 亚洲日本成人网| 久久一区激情| 国产一区二区精品丝袜| 亚洲午夜精品网| 欧美日韩第一区| 亚洲欧洲一二三| 狂野欧美激情性xxxx| 国产一区二区三区黄视频| 亚洲自拍三区| 欧美午夜精品电影| 日韩午夜激情av| 欧美巨乳在线观看| 亚洲经典在线看| 久久在线91| 狠色狠色综合久久| 久久精品女人天堂| 国产亚洲二区| 欧美一区二区三区婷婷月色 | 亚洲人成人99网站| 女女同性精品视频| 亚洲福利在线视频| 欧美a级片网站| 亚洲国产精品成人综合| 蜜桃av噜噜一区| 亚洲激情国产| 免费欧美在线视频| 亚洲国产婷婷综合在线精品| 你懂的视频一区二区| 亚洲国产精品第一区二区| 免费成人你懂的| 亚洲国产综合91精品麻豆| 欧美不卡激情三级在线观看| 亚洲国产精品成人综合| 蘑菇福利视频一区播放| 亚洲韩国精品一区| 欧美—级在线免费片| 日韩视频免费看| 欧美肉体xxxx裸体137大胆| 一区二区三区四区在线| 欧美视频在线观看一区| 亚洲一区久久久| 国产精品推荐精品| 久久精品在线观看| 在线观看视频一区二区| 欧美国产精品久久| 一区二区日韩免费看| 国产精品国产自产拍高清av| 亚洲欧美中文日韩在线| 国外成人免费视频| 欧美ab在线视频| 在线亚洲精品福利网址导航| 国产精品美女主播| 久久aⅴ国产欧美74aaa| 一区一区视频| 欧美精品久久久久久久久老牛影院| 日韩视频一区二区在线观看 | 欧美黄色一区二区| 99视频超级精品| 国产精品亚洲美女av网站| 久久精品国产精品亚洲精品| 亚洲电影免费观看高清| 欧美日韩一区高清| 性欧美xxxx视频在线观看| 国产午夜精品麻豆| 男同欧美伦乱| 亚洲视频在线观看视频| 国产一区二区精品久久| 欧美大片免费久久精品三p | 久久免费99精品久久久久久| 亚洲黄色在线| 欧美午夜视频网站| 久久成人国产| 亚洲人在线视频| 国产免费观看久久| 欧美91精品| 亚洲影院高清在线| 亚洲成人在线网| 国产精品国产精品| 久久综合福利| 亚洲午夜电影| 在线看日韩av| 国产精品美女久久久免费| 久久亚洲色图| 亚洲先锋成人| 亚洲福利电影| 国产欧美日韩中文字幕在线| 欧美成人午夜剧场免费观看| 亚洲免费在线播放| 亚洲国产小视频在线观看| 国产精品久久久久免费a∨| 久热精品视频在线观看一区| 中文av字幕一区| 亚洲成人自拍视频| 国产精品主播| 欧美日本在线看| 久久综合久久综合这里只有精品| 在线亚洲伦理| 在线精品国产欧美| 国产精品一页| 欧美日韩成人在线| 久久久久久夜| 亚洲中无吗在线| 亚洲欧洲精品一区二区三区不卡 | 欧美亚洲在线播放| 日韩午夜免费视频| 一区二区三区在线免费播放| 国产精品对白刺激久久久| 欧美超级免费视 在线| 欧美在线免费视频| 亚洲天堂av综合网| 亚洲人体一区| 一区二区自拍| 国产婷婷色综合av蜜臀av| 欧美日一区二区三区在线观看国产免| 久久深夜福利免费观看| 午夜精品久久久久久久久久久 | 亚洲欧美国产日韩天堂区| 亚洲精品网站在线播放gif| 黄色亚洲网站| 国产区二精品视| 欧美手机在线视频| 欧美连裤袜在线视频| 每日更新成人在线视频| 久久国产精品色婷婷| 亚洲欧美日韩国产综合| 一道本一区二区| 亚洲精品国产欧美| 亚洲高清色综合| 樱桃成人精品视频在线播放| 国产午夜亚洲精品羞羞网站| 国产精品视频精品视频| 欧美亚洲成人网| 欧美日韩亚洲系列| 欧美日本亚洲韩国国产| 欧美韩国一区| 欧美风情在线| 欧美激情第8页| 欧美国产高清| 欧美freesex8一10精品| 美脚丝袜一区二区三区在线观看| 久久久国产成人精品| 久久精品99国产精品酒店日本| 欧美亚洲视频在线看网址| 亚洲欧美制服另类日韩| 亚洲欧美一级二级三级| 亚洲欧美成人网| 午夜精品福利电影| 欧美一区1区三区3区公司| 欧美在线视频一区二区三区| 欧美在线亚洲综合一区| 欧美在线一级va免费观看|