Lastor
@Lastor
說
Wed, Oct 4, 2023 3:56 PM
coding
最近一直在思考 Vue3 的模塊拆分方式，因為經常看到 <script> 下面一大包的情況
Lastor
@Lastor
Wed, Oct 4, 2023 3:57 PM
如果這裡面的功能塊沒有要在其他地方共用的話，特地拆出去又覺得有點怪
Lastor
@Lastor
Wed, Oct 4, 2023 3:58 PM
我之前在 React 遇上這種情況，是蠻常直接在 FC 下面另外寫 function，包成小 group 的感覺
Lastor
@Lastor
Wed, Oct 4, 2023 3:59 PM
反正就是在同一個 file 裡面拆 hooks 引用
Lastor
@Lastor
Wed, Oct 4, 2023 3:59 PM
比照 Vue 的話，是可以這樣寫
Lastor
@Lastor
Wed, Oct 4, 2023 4:00 PM
但實際這樣去做，其實會碰到不少細節守法的問題，怎麼寫都覺得不夠漂亮
Lastor
@Lastor
Wed, Oct 4, 2023 4:04 PM
例如說，這些功能塊可能都會依賴各種 state，如果希望不要引用外部變數，有可能會變成要塞一堆 params，這寫起來其實會非常麻煩
Lastor
@Lastor
Wed, Oct 4, 2023 4:06 PM
如果希望 state 在 setup 裡面顯示宣告，在下面設參數的時候 type 又拉不到，得另外手動再定義一次......
Lastor
@Lastor
Wed, Oct 4, 2023 4:08 PM
type 如果很單純倒是還好，如果是比較大包的 object，要手動再寫一次，就不符合工程師的懶人至上原則
Lastor
@Lastor
Wed, Oct 4, 2023 4:09 PM
目前想到比較好的方式，可能只有這樣了，把要共用變數寫在外面
Lastor
@Lastor
Wed, Oct 4, 2023 4:12 PM
這樣先分裝好，也有個好處，如果引用的父層有需要控制該組件的 state，例如 isShow 之類，那就可以直接 export 給其他組件共用
Lastor
@Lastor
Wed, Oct 4, 2023 4:13 PM
這樣就不用把 isShow 宣在父層，透過 props 扔進去，然後再寫一堆 props, emits 有的沒的，可以少很多 code
Lastor
@Lastor
Wed, Oct 4, 2023 4:16 PM
不過這樣處理，雖然可以做到分裝 group 的效果，但為了讓 hooks 能更方便的引用組件全局的 state，最終還是得把大多 state 都一起寫在下面
Lastor
@Lastor
Wed, Oct 4, 2023 4:16 PM
會有點不太直觀......
Lastor
@Lastor
Wed, Oct 4, 2023 4:17 PM
而且我總覺得這種作法可能有點太潮了，接受的人可能不太多
Lastor
@Lastor
Wed, Oct 4, 2023 4:22 PM
=========
話說，ref 這些寫在 setup 外面，我不知道是不是框架合法的做法，以前意外發現這些東西寫在外面，完全可以 work
Lastor
@Lastor
Wed, Oct 4, 2023 4:22 PM
甚至還可以跨組件共用，直接當作迷你 store，就很扯
Lastor
@Lastor
Wed, Oct 4, 2023 4:25 PM
這大概就是 React 跟 Vue 的底層不太一樣的地方，我記的 React 的 useState 是不能寫在 FC 外面的
Lastor
@Lastor
Wed, Oct 4, 2023 4:26 PM
但 Vue 的 setup 其實跟 <script> 的其他地方是同一個 scope
Lastor
@Lastor
Wed, Oct 4, 2023 4:27 PM
就算不是宣告在 setup 裡面，最後只要有放到 setup 裡面 expose 出去，那宣在外面還是裡面，是一樣的
l• ܫ•) Davyキュルッ
@david50407
Wed, Oct 4, 2023 11:43 PM
我會直接用 //#region 包起來
就不用思考你上面說的那堆什麼要擺哪裡的問題了
l• ܫ•) Davyキュルッ
@david50407
Wed, Oct 4, 2023 11:47 PM
至於想要讓父層取用東西的話
通常是不太常這麼做
但標準做法其實是 defineExpose
https://vuejs.org/...
所以綜合我上面的做法就完全可以滿足你想要的東西XD
l• ܫ•) Davyキュルッ
@david50407
Wed, Oct 4, 2023 11:48 PM
但如果你真的真的真的很大一坨 code 的話
還是建議拆出來直接做一個 composable 啦
反正共不共用已經不是目的了 而是易讀性
Lastor
@Lastor
Thu, Oct 5, 2023 2:01 AM
l• ܫ•) Davyキュルッ
: region 只是收合啊，這應該跟要 shared 變數該放在哪沒有直接關聯?
Lastor
@Lastor
Thu, Oct 5, 2023 2:02 AM
defineExpose 要讓父層拿到，會跟以前 optional API 一樣，要打 refs 去拿 instance，這不是我想要的
Lastor
@Lastor
Thu, Oct 5, 2023 2:04 AM
我想讓他可以用 hooks 的方式，直接拿到可以控制該組件的 method or state。記得是在 React 的 Antd 看過類似的設計，我蠻喜歡的
Lastor
@Lastor
Thu, Oct 5, 2023 2:06 AM
前面說的不夠精確，煩的那種不大又不小的玩意，拆也不是，不拆也不是，所以才想說用這種在同個 file 拆塊的方式
l• ܫ•) Davyキュルッ
@david50407
Thu, Oct 5, 2023 6:08 AM
喔我想說放在 region 就大家都一起 share 了XDDDD
l• ܫ•) Davyキュルッ
@david50407
Thu, Oct 5, 2023 6:09 AM
但我覺得這種用法可能沒有這麼 Vue 就是了
但也是有趣的用法
Lastor
@Lastor
Thu, Oct 5, 2023 6:11 AM
l• ܫ•) Davyキュルッ
: 啊啊，我懂你意思了，你是說我就不要去分兩塊 <script> 寫了，就全寫在 <script setup> 裡面，靠 region 收合去隱藏細節的 code
Lastor
@Lastor
Thu, Oct 5, 2023 6:13 AM
畢竟我這樣拆的訴求，只是希望把細節放到下面藏起來，用這方式一樣能實現，我也不用去煩作用域的問題
l• ܫ•) Davyキュルッ
@david50407
Thu, Oct 5, 2023 9:29 AM
沒錯 XD
apmk@住在「劏房」的
@apmk
Wed, Nov 29, 2023 4:09 AM
如果是routing換了頁也要persist的那種global state，是建議用pinia這些state manager，不然的話後面換SSR會不work
apmk@住在「劏房」的
@apmk
Wed, Nov 29, 2023 4:10 AM
不想variable A,B,C的話那傳一整個class/object?
載入新的回覆
話說，ref 這些寫在 setup 外面，我不知道是不是框架合法的做法，以前意外發現這些東西寫在外面，完全可以 work
就不用思考你上面說的那堆什麼要擺哪裡的問題了
通常是不太常這麼做
但標準做法其實是 defineExpose https://vuejs.org/...
所以綜合我上面的做法就完全可以滿足你想要的東西XD
還是建議拆出來直接做一個 composable 啦
反正共不共用已經不是目的了 而是易讀性
但也是有趣的用法