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
}
  • Vue.js

    Vue.js(读音 /vjuː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    208 引用 • 629 回帖 • 519 关注
  • 工程化
    1 引用 • 1 回帖

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • touchM 1 评论
    支持者

    大佬,最近在接触 vue,有好的入门教程推荐一下不 😋

    直接跟着官网走一遍,如果比较吃力可以尝试找点视频(较慢)练习,先混学,然后再形成体系
    Rabbitzzc 1