vue組件書寫規範

時間 2019-11-11

標籤 vue 組件書寫規範简体版

原文原文鏈接

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: {} // 全部涉及到方法/操做/觸發等動做的,不管同步仍是異步,都應在此處體現出來,以保證其可追溯性.是構成整個組件的邏輯操做的主體,一般所佔篇幅較大,建議放在最後,以免將其餘屬性和方法擠到最後不方便查看,且其更似一個功能獨立的單塊.
}