Vue reactive 使用筆記

閱讀時間約 1 分鐘

鱈魚的魚缸搬家了!新家文章皆有重新修訂,歡迎來新家看看喔。(´▽`ʃ♡ƪ)

raw-image


使用 Vue 定義資料時,到底要用 ref 還是 reactive 曾經是一個很常見的問題,不過現在官方文檔推薦使用 ref 就行,所以也不是甚麼問題了。( •̀ ω •́ )✧


一般情況下的確 ref 更好,坑也相對少一點,且更容易拆分邏輯,詳細說明可以看看尤大訪談


所以 reactive 真的沒用途了嗎?這篇文章來記錄一下 reactive 的用法。


不定期更新,持續補充用法。( ´ ▽ ` )ノ

解包響應式資料

以 VueUse 的 useElementBounding 為例。


此 API 可以取得多個 element 的 bounding 資料,只需要寬高資料,就可以只取出寬高:

const { width, height } = useElementBounding(el)


但是有時候會需要全部都要,可能會這樣寫:

const bounding = useElementBounding(el)


這時候因為內部資料還是 ref,所以取值需要 .value(例如 bounding.width.value),這個時候就可以先用 reactive 包起來:

const bounding = reactive(useElementBounding(el))


包起來後,就可以 bounding.width,不用 value 了


以上用法供大家參考,若有錯誤還請大家多多指教。

17會員
14內容數
各種鱈魚滾鍵盤的雜紀
留言0
查看全部
發表第一個留言支持創作者!
鱈魚的魚缸 的其他內容
watch 不是不能用,而是在使用 watch 之前,先想想有沒有其他方案,真的沒有才用 watch。 千萬不要為了一時方便讓元件裡滿滿的 watch,因為容易產生難以追蹤的副作用,會讓資料流更加複雜。
如果 watch 沒有放在元件最外層,可能會導致元件 onUnmounted 後watch不會自動解除,至於該怎麼辦,就讓我們娓娓道來。( ´ ▽ ` )ノ
watch 不是不能用,而是在使用 watch 之前,先想想有沒有其他方案,真的沒有才用 watch。 千萬不要為了一時方便讓元件裡滿滿的 watch,因為容易產生難以追蹤的副作用,會讓資料流更加複雜。
如果 watch 沒有放在元件最外層,可能會導致元件 onUnmounted 後watch不會自動解除,至於該怎麼辦,就讓我們娓娓道來。( ´ ▽ ` )ノ
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
在 Vue 3 的 Composition API 中,引入了兩個重要的響應式數據處理工具:ref 和 reactive,本文將介紹ref 和 reactive,並透過實際範例來解釋它們的用法和差異。
Thumbnail
新的AI工具claude2可以上傳文件,幫使用者分析資料、提供重點整理,於是立即牛刀小試上一篇文章《婚姻風暴》。claude2的使用方式與ChatGPT大大不同,claude2只接受使用者上傳的專屬資料,分析並整理重點,並不會像ChatGPT去搜索開放的全網資料;claude2比較像是學術上
Thumbnail
還在糾結使用筆記的分類嗎? 企業KM的四種形式筆記 •Fleeting note(行動筆記) •Permanent note(機制筆記) •Literature note(分享筆記) •Project-related note(專案筆記)
Thumbnail
以前只有用過 iMove 剪過自己的結婚成長影片,就是用一些照片幻燈片搭配感動的音樂,雖然技術力薄弱,但在婚禮現場播放時,可能只有我自己看得懂那段影片的故事,我居然哭到淚流不止啊!婚攝大哥也很敬業,就把那個瞬間捕捉下來了。 後來也是因為工作上的需求,有嘗試過有各種行動剪輯軟體來完成一些小短片,所以還
Thumbnail
住在西倫敦的時間決定能搭英航的時候就搭英航,除了是Amex BA聯名卡持有者累積點數外,也有貴人時不時會送我機票(乾蝦!),讓我近兩年暫時都可以搭英航進出歐洲才能在這裡分享(掩面)。以下是在英國使用英航里程的筆記
Thumbnail
使用间隔重复强化记忆 正如很多人已经所熟知的艾宾浩斯遗忘曲线中所揭示的那样,我们的记忆是随着时间的流逝而衰减的,并且这种记忆衰减是有规律的。对此,最好的办法,便是在记忆衰退之前,按照一定的时间规律进行复习和自我检验。间隔重复便是一种被证明行之有效的记忆方法,能在很大程度上抵抗艾宾浩斯遗忘曲线。
Thumbnail
使用场景 使用场景:虽然我是思源笔记勇士,但是使用却不多。有些网页我使用了翻译软件进行了全文翻译,使用其他插件剪藏的结果依然是英文。然而,思源笔记却可以中英文同时剪藏。因此,我主要使用思源笔记进行网页剪藏,备份阅读材料。可能大材小用了。另外,使用思源笔记进行 PDF 阅读。 思源笔记 介绍 优点
Thumbnail
「卡片盒筆記法」之所以困難又迷人,是因為它結合了厚實的方法論以及最新的數位筆記軟體。在《How to take smart notes ?》書中並沒有明確寫明要用哪種工具,因此不同的創作者都有自己的解讀,也得以能看到不同人的寫作方式。這篇文章我來來看閱讀前哨站站長 Waki 使用 Heptabase
Thumbnail
「卡片盒筆記法」特別適合用來寫長篇文章 (例如論文、著作、重要文章),也是《How to take smart notes ?》中主要瞄準的對象。 我已經閱讀《電腦玩物》部落格3年了,至今是非常佩服 Esor「怪物級」的文字產量、也很好奇Esor 會如何將「卡片盒筆記法」融入自己的 Evernote
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
在 Vue 3 的 Composition API 中,引入了兩個重要的響應式數據處理工具:ref 和 reactive,本文將介紹ref 和 reactive,並透過實際範例來解釋它們的用法和差異。
Thumbnail
新的AI工具claude2可以上傳文件,幫使用者分析資料、提供重點整理,於是立即牛刀小試上一篇文章《婚姻風暴》。claude2的使用方式與ChatGPT大大不同,claude2只接受使用者上傳的專屬資料,分析並整理重點,並不會像ChatGPT去搜索開放的全網資料;claude2比較像是學術上
Thumbnail
還在糾結使用筆記的分類嗎? 企業KM的四種形式筆記 •Fleeting note(行動筆記) •Permanent note(機制筆記) •Literature note(分享筆記) •Project-related note(專案筆記)
Thumbnail
以前只有用過 iMove 剪過自己的結婚成長影片,就是用一些照片幻燈片搭配感動的音樂,雖然技術力薄弱,但在婚禮現場播放時,可能只有我自己看得懂那段影片的故事,我居然哭到淚流不止啊!婚攝大哥也很敬業,就把那個瞬間捕捉下來了。 後來也是因為工作上的需求,有嘗試過有各種行動剪輯軟體來完成一些小短片,所以還
Thumbnail
住在西倫敦的時間決定能搭英航的時候就搭英航,除了是Amex BA聯名卡持有者累積點數外,也有貴人時不時會送我機票(乾蝦!),讓我近兩年暫時都可以搭英航進出歐洲才能在這裡分享(掩面)。以下是在英國使用英航里程的筆記
Thumbnail
使用间隔重复强化记忆 正如很多人已经所熟知的艾宾浩斯遗忘曲线中所揭示的那样,我们的记忆是随着时间的流逝而衰减的,并且这种记忆衰减是有规律的。对此,最好的办法,便是在记忆衰退之前,按照一定的时间规律进行复习和自我检验。间隔重复便是一种被证明行之有效的记忆方法,能在很大程度上抵抗艾宾浩斯遗忘曲线。
Thumbnail
使用场景 使用场景:虽然我是思源笔记勇士,但是使用却不多。有些网页我使用了翻译软件进行了全文翻译,使用其他插件剪藏的结果依然是英文。然而,思源笔记却可以中英文同时剪藏。因此,我主要使用思源笔记进行网页剪藏,备份阅读材料。可能大材小用了。另外,使用思源笔记进行 PDF 阅读。 思源笔记 介绍 优点
Thumbnail
「卡片盒筆記法」之所以困難又迷人,是因為它結合了厚實的方法論以及最新的數位筆記軟體。在《How to take smart notes ?》書中並沒有明確寫明要用哪種工具,因此不同的創作者都有自己的解讀,也得以能看到不同人的寫作方式。這篇文章我來來看閱讀前哨站站長 Waki 使用 Heptabase
Thumbnail
「卡片盒筆記法」特別適合用來寫長篇文章 (例如論文、著作、重要文章),也是《How to take smart notes ?》中主要瞄準的對象。 我已經閱讀《電腦玩物》部落格3年了,至今是非常佩服 Esor「怪物級」的文字產量、也很好奇Esor 會如何將「卡片盒筆記法」融入自己的 Evernote