vue組件書寫規范
import引入原則:
// import { mapState, mapGetters, mapActions, mapMutations } form 'vuex' // 涉及到狀態管理的組件優先引入vuex
// import component from 'components/xxxxxx.component' // components
// import directive from 'directives/xxxxxx.directive' // directives
// import { method_1, method_2 } from 'sdk/xxxxx' // 方法/工具/接口
// 以上的components | directives | sdk等等為簡寫形式,具體規則參見bulid/webpack.base.conf.js文件中的alias配置.此配置是為了統一引入規則,並以防項目文件遷移的時候每個引入路徑都需要改動,設置alias之后只需改動該配置項即可
屬性及方法書寫原則:
// vue作為一個數據驅動的框架,數據是主體,所有和數據相關的屬性應該盡量放置在靠前的位置(主要包括data, props, computed)
export default {
// 數據相關:
props: [], // 若有外部傳入參數,優先書寫props.排序原因:props是整個組件的數據基礎,作為一個先決條件應該被優先依賴
data () {}, // data中存放有關該組件自身內部控制狀態或數據的信息.排序原因:data中的數據可以依賴於props中的數據.
computed () {}, // 此屬性的應用場景多為props或data中的數據並非展示到頁面上的最終數據,需要進行一定的格式化或者計算,如props中date值為ms數,而頁面中的倒計時需轉換為[時:分:秒]形式,此時需用到計算屬性.排序原因:computed屬性可以依賴於props或data中的數據,並可隨數據源的變化進行同步更新.
// 組件及外部引入相關:
components: {}, // 此屬性為該組件內部對於其他組件的依賴,一般占位不多,放在盡量靠前的位置方便增刪以及修改.
directives: {}, // 同上
// 鈎子函數:
beforeCreate () {}, // 較少用到該鈎子函數,有待發掘
created () {}, // 此函數執行的時機為props,data,computed等數據初始化完畢之后,此時vue實例並沒有掛載到dom上,所以切記,不要在此階段進行dom操作.通常在此階段調用接口數據.
beforeMounted () {}, // vue實例掛載之前的鈎子函數,較少用到,能在此階段調用的通常可在created階段執行
mounted () {}, // vue實例掛載到dom上,在此階段可以使用$el,$refs等獲取dom元素.盡量避免使用選擇器來對dom進行操作.(作為數據驅動的框架,原則上能不動dom就不動,除非在不得不動的情況下再考慮操作dom).
beforeUpdate () {}, // 數據更新之前調用,也就是每次數據更新都會執行該函數,其調用時機的高頻性注定其使用的低頻性.所以,項目中幾乎不會用到.
updated () {}, // 數據更新之后調用,使用情況同上
beforeDestroy () {}, // 不明所以,不知有什么合理的使用時機和情況
destroyed () {}, // 同上
// 其他屬性及方法:
watch: {}, // 當我們需要根據一個數據的變化來實現其他部分的同步更改的情況下,會使用的此屬性,檢測其變化,並根據變化值來確定視圖或者數據的最終形態.
methods: {} // 所有涉及到方法/操作/觸發等動作的,無論同步還是異步,都應在此處體現出來,以保證其可追溯性.是構成整個組件的邏輯操作的主體,通常所占篇幅較大,建議放在最后,以避免將其他屬性和方法擠到最后不方便查看,且其更似一個功能獨立的單塊.
}
組件化的大體思路:
1.基礎組件細粒化: 將功能和樣式最簡單的結構體封裝為一個組件,要求功能單一,且不包含任何業務代碼.(功能單一,復用性高)
2.業務組件功能化: 根據業務進行基礎封裝,做到盡可能同類組件都可以通用.(功能較全面,復用性適中)
3.最終組件全面化: 根據具體需求,以頁面為單位對組件樣式及功能進行最終完善.(功能全面,復用性低)