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: {} // 全部涉及到方法/操做/触发等动做的,不管同步仍是异步,都应在此处体现出来,以保证其可追溯性.是构成整个组件的逻辑操做的主体,一般所占篇幅较大,建议放在最后,以免将其余属性和方法挤到最后不方便查看,且其更似一个功能独立的单块.
}

组件化的大致思路:

1.基础组件细粒化: 将功能和样式最简单的结构体封装为一个组件,要求功能单一,且不包含任何业务代码.(功能单一,复用性高)

2.业务组件功能化: 根据业务进行基础封装,作到尽量同类组件均可以通用.(功能较全面,复用性适中)

3.最终组件全面化: 根据具体需求,以页面为单位对组件样式及功能进行最终完善.(功能全面,复用性低)