Vue3 最佳實踐之編碼規範

語言: CN / TW / HK
時間 2021-09-25 11:15:06

小知識，大挑戰！本文正在參與“程式設計師必備小知識”創作活動。

背景

Vue3 + TS 最佳實踐 已經給出了元件級別的最佳實踐寫法，若要指導實踐開發，還需要更細粒度的的程式碼規範。 本文脫胎於 Vue3 官網的 風格指南，因為原版內容有點多，而且為了具有更廣泛的適應性，原版的標準顯然不夠“嚴”。所以本文在分類和嚴格程度上做了改動，讀過此文之後，還是建議把官方文件讀一遍，如此良心的文件，不多見了。

正文

以下規範均建立在使用了 Vue3 + TS 最佳實踐 的基礎之上。

元件（檔案）名稱

  1. 所有元件使用 SFC 或 TSX 形式編寫；
  2. SFC 中的標籤順序統一為 <script>、<template>、<style>；
  3. 凡是跟元件名相關的（元件名、檔名及在模板中使用），都必須採用大駝峰 PascalCase 形式；
  4. 要用多個單詞，避免與 HTML（未來）元件衝突；
  5. 一個檔案只允許存在一個元件；
  6. 與父元件緊密耦合的子元件，命名要以父元件名為字首，例：TodoList、TodoListItem、TodoListItemButton，詳見 緊密耦合的元件名稱強烈推薦；
  7. 一般化描述放前，特殊化描述放後，例：SearchButtonClear、SettingsCheckboxLaunchOnStartup，詳見 元件名稱中的單詞順序強烈推薦
  8. 起名儘量使用完整單詞而不是縮寫，前提是要配置好編輯器，使書寫長命名的代價足夠低。

屬性相關

  1. defineProps、defineEmits 要用型別宣告的方式，而非執行時宣告；
  2. props 宣告時使用 camelCase，但在模板中使用時使用 kebab-case，詳見 Prop 命名
  3. 一定要為 v-for 設定 key，且儘量不要用 index；
  4. v-if 和 v-for 禁止同時出現在一個元件上；
  5. 始終使用指令縮寫，即:、@、#，除了 v-bind="obj" 這種情況。

其他

  1. scoped 中儘量避免使用元素選擇器，詳見 scoped-中的元素選擇器；
  2. 程式碼中禁止出現 this.$parent、this.$root 之類的訪問祖先元件的程式碼，防止資料流混亂；
  3. 使用 hooks 代替 HOC（高階元件）和 renderProps；
  4. hooks、utils、constants、types 等檔案，就近（儘量深）存放，必要時才做目錄提升；
  5. 其他前端普適的、非 Vue 特有的規範，見 Lint 不能解決的前端程式碼規範；

總結

雖然學習和適應規範有一定的成本，但是統一的規範可以大大降低團隊的溝通、維護成本。而且越熟悉業內主流的規範，對於閱讀開源專案來說越有利。同樣的，自己寫的專案滿足主流規範，也更容易被他人接受。總之，平時開發時，對於規範的遵守越嚴格，對未來的好處就越大，當然習慣的成本也會比較大，但這是值得的。

“如閉門造車，出門合轍，了無差異。”——宋·沈作喆《寓卷》七

「」
「」