vue 实例顺序

在Vue中，export default对象中有很多约定的API Key。每个人的顺序排放都可能不一致，但保持统一的代码风格有助于团队成员多人协作。

Vue官网文档中也有推荐顺序 (opens new window),文档中对选项顺序做了许多分类。但从工程项目角度思考，需要更加精简以及合理的排序。推荐如下规则进行排序：

1. Vue扩展: extends, mixins, components

2. Vue数据: props, model, data, computed, watch

3. Vue资源: filters, directives

4. Vue生命周期: created, mounted, destroy...

5. Vue方法: methods

以下推荐顺序，基于团队小伙伴@akimoto整理的顺序：

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
}

标签：vue,methods,实例,mixins,watch,Vue,props,顺序
来源： https://www.cnblogs.com/zhangyuanyuan1/p/15437410.html