不懂該如何劃分 Vue 的元件

vue vue3 javascript modern web component

菜雞 2022-12-06 18:40:37 ‧ 1153 瀏覽

分享至

我正在嘗試使用 Vue3 開發一個自用的 webapp，
目前大致的架構長得像這樣：

其中 Data 的部分是用來把 JSON 的內容做視覺化呈現用的，
如果在 Search bar 的地方輸入值，
會以 .filter() 的方式過濾資料後呈現。

因為日後還有其他想要增加的功能，
所以想要趁早做好元件的劃分方便管理，
但是不知道該如何下手，
索性把整個 App 當成一個元件似乎也不是一種很好的 Practice，
不知道各位使用 Vue 的前輩有什麼看法？

froce iT邦大師 1 級 ‧ 2022-12-06 21:09:01 檢舉

1. 你Navbar裡放search bar不太好吧?除非那是全站通用的
2. 我個人會把search bar放data區塊內...而且應該說你data那個區塊應該會是router view內的內容，而不是普通的元件。

菜雞 iT邦新手 5 級 ‧ 2022-12-06 22:03:14 檢舉

@force
因為只是想淺嘗 Vue，所以只有用 <script> 引入，沒有用上 vue-cli 和其他工具鏈，而這個 webapp 只會有一頁（再加上一些 Modal），才會把 search bar 放在 navbar 裡

froce iT邦大師 1 級 ‧ 2022-12-07 08:27:48 檢舉

單一頁面不會復用，所以不用考慮拆不拆的問題。

vue 如果用CDN引用，對比 jQuery 不會有太大的優勢，vue 的真正優勢是在SPA下，自由建立組件、重複復用(以及帶來的風格統一)、資料驅動帶來的多元件連動等...尤其是資料驅動這項，對比 jQ 要不斷的寫事件驅動鍊，jQ 難追蹤維護且容易出錯。

這些東西你不寫SPA或專案沒到一定規模，你很難注意到資料驅動框架(vue/react)的先進。

單一頁面下我自己會直接用 js 或 jQuery ，畢竟vue的元件庫目前沒多少能用CDN引用的。

如果你的職業是web開發者想學vue的話，我個人是建議直接用工具鍊來寫SPA了。

登入發表討論