在現(xiàn)有規(guī)則基礎(chǔ)上，統(tǒng)一團(tuán)隊(duì)使用的Vue組件代碼規(guī)范。

代碼風(fēng)格

變化的點(diǎn)：

強(qiáng)制組件選項(xiàng)順序，不允許自己隨意調(diào)整。

目前關(guān)閉了v-html的報(bào)錯(cuò)。

大部分新增規(guī)則都是warning，不影響構(gòu)建。

一些需要注意的Vue組件設(shè)計(jì)

Props設(shè)計(jì)

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

props設(shè)計(jì)應(yīng)遵旨組件設(shè)計(jì)，某個(gè)參數(shù)對外是必須required那就required，允許有默認(rèn)值才使用default。

目前有一些本來設(shè)計(jì)是required結(jié)果用了default，導(dǎo)致線上環(huán)境有可能找不到問題所在。

而且使用required，還可以通過Vue幫助進(jìn)行參數(shù)檢查，而不是自己手動(dòng)檢查。

少用watch

一個(gè)狀態(tài)可能在不同情況下會(huì)發(fā)生的不同的變化，使用watch可能會(huì)造成業(yè)務(wù)邏輯的混亂，特別使用多個(gè)watch的情況。

實(shí)際大部分情況下，使用computed/method都優(yōu)于watch。

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

watch更應(yīng)該用于一些邏輯之外的如打日志，或當(dāng)作事件監(jiān)聽如監(jiān)聽$route變化。

當(dāng)然還是要根據(jù)實(shí)際情況決定。

使用html規(guī)范的命名

事件名、模板中使用組件、屬性應(yīng)遵循h(huán)tml規(guī)范，這也是vue推薦的方式，即實(shí)用小寫+連線而不是駝峰。

模板邏輯要盡量簡單易看

不要在模板里寫太多邏輯，如果有復(fù)雜的邏輯應(yīng)寫在computed/methods。

每一個(gè)操作的狀態(tài)都要處理好

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

需要養(yǎng)成的編碼習(xí)慣

看到warning一定要修正。

方法或?qū)傩韵聞澗€開頭在js社區(qū)中約定表示私有屬性/方法，不要亂用。

理解代碼是寫給人看的，不是單純給機(jī)器執(zhí)行。

因?yàn)閖s非常靈活，所以我們更需要規(guī)范約束自己，寫出邏輯清晰的代碼。

作為前端要理解交互設(shè)計(jì)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。