vue组件书写规范

Posted 2020-10-15 阿席巴i

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