VUE組件開發規範

「

Vue組件提供了豐富多樣的配置可供開發者使用，不同的配置項書寫順序並不影響實際運行效果，但這缺給後期維護帶來了一定的困擾，因此在藍鯨產品中心我們規範了配置項的書寫順序。

」

書寫原則

組件是什麼組件需要依賴什麼組件需要什麼數據組件內部有什麼數據組件在各生命周期做了什麼組件有什麼API可調用

規範

一

組件是什麼

首先應該告訴開發者該組件是什麼，因此我們要求將name寫在組件的最前方。

二

組件需要依賴什麼

開發維護一個組件時，通常組件內部還依賴了其他的組件，類似js中需要將依賴import寫在最上方，因此我們要求components屬性緊鄰name屬性。

三

組件需要什麼數據

一個組件作為子組件與父組件通信時，父組件的數據需要通過props屬性向下傳遞，其他諸如directives mixins等依賴依次在後。

四

組件內部有什麼數據

除去父組件提供的數據外，我們組件內部也需要維護自己的數據data，同時基於自己的數據還有計算屬性computed依賴data，偵查器watch對於props data computed均能監聽。

五

組件在各生命周期做了什麼

外部依賴，內部狀態都聲明後，我們需要知道組件在哪些生命周期做了什麼事，因此接下來是生命周期鉤子函數的調用。

六

組件內部有什麼API可調用

最後，組件內部有什麼API可調用，即methods。

至此，我們的規範已經形成，其他未列入的屬性配置項，按照以上原則在合適的位置書寫即可。

原文作者：騰訊高級工程師朱雷

來源：騰訊內部KM論壇

-前端好課-

最熱前端框架，晉陞加薪必修技能

多項目迭代式教學，低門檻快速進階高級工程師

若需了解更多，請掃碼添加小助手諮詢~

也可直接查找微信號：TencentNext

▲ NEXT學院官方課程助教 ▲

點擊閱讀原文，0元學習