vue 文件结构顺序统一

vue 文件顺序

在平时的开发中，会发现很多 vue 文件里面的结构很不统一，比如找个生命周期函数，可能在 methods 配置下面，影响到了开发效率，保持统一的代码风格有助于团队成员多人协作。

Vue 官网文档中也有推荐顺序,文档中对选项顺序做了许多分类。但从工程项目角度思考，也是借鉴了其他开发者推荐的顺序：

大致顺序如下：

Vue扩展: extends, mixins, components
Vue数据: props, model, data, computed, watch
Vue资源: filters, directives
Vue生命周期: created, mounted, destroy...
Vue方法: methods
​

实际的代码可能如下：

export default {
    name: '',
    /*1. Vue扩展 */
    extends: '', // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],   
    components: {},
    /* 2. Vue数据 */
    props: {},
    model: { prop: '', event: '' }, // model 会使用到 props
    data () {
        return {}
    },
    computed: {},
    watch:{}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created () {},
    mounted () {},
    destroy () {},
    /* 5. Vue方法 */
    methods: {}, // all the methods should be put here in the last
}
​