iT邦幫忙

0

vue style Guide

vue

紀錄一下自己學習的歷程 有理解錯誤的歡迎提出指教

必要的

  1. 組件名稱最好為多個單詞,可以避免跟未來的 HTML tag 衝突。
    例如 todo 改成 todo-item。

  2. data 必要是一個 callback 函數,因為必須創造一個獨立數據。
    new Vue 直接使用 data 就好,因為只存在一個實例。

  3. props 內容要盡量詳盡,也更能看懂組件的使用方法,最少要指定型別,這樣再傳入錯誤型別時,能更容易找到錯 誤。

  4. 使用 v-for 時盡量搭配 :key 使用,key 要是唯一值,可以讓程式碼更容易預測。

  5. 不要在一個 tag 上同時使用 v-for, v-if 因為 v-for 的優先級比 v-if 高, 所以會造成只渲染一部分就要重 新渲染整個列表。
    比較好辦法是 v-if 要計算的放在 computed 再把計算結果放到 v-for 裡面,或是在容器元素中放 v-if 先計算 為 false 的就不會再渲染。

  6. 為單元件組件樣式加上作用域。
    scoped 或是 css Modules 或是 BEM 策略。

  7. 自定義的私有屬性使用 $_ 前綴,並附帶一個命名空間。
    範例 $_ 自己命名 - 作用名。

強烈推薦

  1. 只要有能夠拼接文件的系統,多使用單獨的文件,會方便管理。

  2. 單文件組件的命名最好以單詞都為開頭命名,範例 TheTooltip 或是以 - 連接,範例 the-tooltip。
    不要混用命名方法。

  3. 最簡單可多次使用的基礎組件命名方法最好在前綴加上。
    Base, App, V 這三種。

  4. 只應該擁有單個活躍實例的組件應該以 The 前綴命名,以示其唯一性。

  5. 只在父組件下有意義的組件,應該要用父組件名當命名,這樣才會把相關檔案排在一起。

  6. 以一般化的單詞開頭,描述性的單詞結尾,為組件命名。

  7. HTML 不接受自閉合的自訂議元素,錯誤示範 。
    但在單文件組件字符串模板和 JSX 中可以這樣做讓你的代碼更簡潔。

  8. 單文件組件和字符串模板中組件名應該總是 PascalCase,範例 MyComponent。
    但是在 DOM 模板中總是 kebab-case 範例 my-component。

  9. 在 js 的檔案組件命名也是 PascalCase。

  10. 組件命名要使用完整單詞不要使用縮寫。

  11. 在聲明 prop 的時候,其命名應該始終使用 camelCase,而在模板和 JSX 中應該始終使用 kebab-case
    範例

    props: {greetingText: String}
    <WelcomeMessage greeting-text="hi"/>
    
  12. 多個特性的 tag 每個特性占一行。

  13. 組件模板應該只包含簡單的表達式,複雜的表達式則應該重構為 computed 或 methods。

  14. 要把複雜的 computed 分成多個簡單的 computed 這樣方便測試、閱讀、改變。

  15. HTML 特性值應該始終帶 "" (單引號或雙引號,選你 JS 裡不用的那個)。

  16. 指令縮寫不要混用,要全部縮寫或全部不縮寫。


尚未有邦友留言

立即登入留言