鱈魚的魚缸搬家了!新家文章皆有重新修訂,歡迎來新家看看喔。(´▽`ʃ♡ƪ)
使用 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 了
以上用法供大家參考,若有錯誤還請大家多多指教。