在現有規則基礎上，統一團隊使用的Vue組件代碼規范。

代碼風格

變化的點：

強制組件選項順序，不允許自己隨意調整。

目前關閉了v-html的報錯。

大部分新增規則都是warning，不影響構建。

一些需要注意的Vue組件設計

Props設計

props除非必要，最好使用required而不是default。

props設計應遵旨組件設計，某個參數對外是必須required那就required，允許有默認值才使用default。

目前有一些本來設計是required結果用了default，導致線上環境有可能找不到問題所在。

而且使用required，還可以通過Vue幫助進行參數檢查，而不是自己手動檢查。

少用watch

一個狀態可能在不同情況下會發生的不同的變化，使用watch可能會造成業務邏輯的混亂，特別使用多個watch的情況。

實際大部分情況下，使用computed/method都優于watch。

從代碼閱讀上watch就不如method/computed，使用后者能非常直觀能看到執行順序和邏輯。

watch更應該用于一些邏輯之外的如打日志，或當作事件監聽如監聽$route變化。

當然還是要根據實際情況決定。

使用html規范的命名

事件名、模板中使用組件、屬性應遵循html規范，這也是vue推薦的方式，即實用小寫+連線而不是駝峰。

模板邏輯要盡量簡單易看

不要在模板里寫太多邏輯，如果有復雜的邏輯應寫在computed/methods。

每一個操作的狀態都要處理好

異常、加載中、提交中等等狀態的處理都要處理好并符合交互習慣(操作要有反饋)，減少DOM重繪以及用戶交互的不流暢。

需要養成的編碼習慣

看到warning一定要修正。

方法或屬性下劃線開頭在js社區中約定表示私有屬性/方法，不要亂用。

理解代碼是寫給人看的，不是單純給機器執行。

因為js非常靈活，所以我們更需要規范約束自己，寫出邏輯清晰的代碼。

作為前端要理解交互設計。

總結

以上是生活随笔為你收集整理的vue 组件名 下划线_团队Vue组件规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。