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

必要的

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. 指令縮寫不要混用，要全部縮寫或全部不縮寫。