``` 頁面基本結構 <template> <hd-container></hd-container> </template> <script> export default { data() { return {} }, created() {}, mounted() {}, ??methods: {} } </script> <style lang="less" scoped> </style> ``` <br /> ``` Vue方法放置順序 - components - props - data - created - mounted - activited - update - beforeRouteUpdate - methods - filter - computed - watch ``` <br /> ``` 組件 props 原子化 提供默認值 使用 type 屬性校驗類型 使用 props 之前先檢查該 prop 是否存在 命名規范： 對于 props 聲明的屬性，在父組件的 template 模板中，屬性名需要使用中劃線寫法 子組件 props 屬性聲明時，使用小駝峰或者中劃線寫法都可以； 而子組件的模板使用從父組件傳來的變量時，需要使用對應的小駝峰寫法。 Vue 能夠正確識別出小駝峰和下劃線命名法混用的變量，如這里的 forChildMsg 和 for-child-msg 是相同的。 ``` <br /> ``` 同一模塊有多個導入時一次性寫完 import { myFunc1 } from 'module' import { myFunc2 } from 'module' import { myFunc1, myFunc2 } from 'module' ``` <br /> ``` v-for 應該避免與 v-if 在同一個元素上使用，因為 v-for 的優先級比 v-if 更高，為了避免無效計算和渲染，應該盡量將 v-if 放到容器的父元素之上。 <div v-if="showList"> <div v-for="item in list" :key="item.id"> <div> </div> ``` <br /> ``` 在單文件組件 字符串模板和 JSX 中，有內容的組件應該是自閉合的，但在 DOM 模板里永遠不要這樣做 <!-- 在單文件組件、字符串模板和 JSX 中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component> ``` <br /> ``` 指令縮寫 (用 ':' 表示 'v-bind:'，'@' . 表示 'v-on:' 和用 '#' 表示 'v-slot') 應該要么始終使用，要么始終不使用 <input :value="value" @input="onInput" /> <template #header></template> ``` <br /> ``` 在生命周期 方法 函數建議在屬性之間添加一行空行 export default { computed: { formattedValue() {}, styles() {} }, methods: { onInput() {}, onChange() {} } } ``` <br /> > 01\. 增刪改查操作建議以父子組件傳值或彈層形式實現，并減少 URL 傳參。 02\. 項目開發完成后，沉余代碼 無用注釋代碼 調試信息等使用完及時刪除。 03\. 開發中通用函數，方法類，組件要統一進行二次封裝，集成調用，禁止在項目中組件中反復使用相同代碼塊。 04\. 確保項目再編譯時保持頁面代碼整潔 邏輯清晰 注釋規范，遵循 ECMAScript 6 語法規范，以避免與項目的其他部分構成兼容性和復雜性。 05\. 保證 公共類函數組件化 模塊化， 業務層代碼原子化， 邏輯層代碼簡單化， 判斷類代碼結構化。 06\. 打包 提交 發布代碼時，要反復查看是否存在語法以及 eslint 報錯，如果存在禁止任何提交操作