vue风格规范梳理

发表于 | 分类于
字数统计: 893 字 | 阅读时长 ≈ 4 分钟

有助于规避冲突，及团队开发。

vue规范梳理

必须的（避免错误冲突）

  • 组件名为多个单词（避免冲突）；

  • 组件中data必须为一个函数，根实例new Vue时可以使用对象的写法；

  • prop定义尽量详细

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 一般规范写法
    props: {
        status: String
    }
    // 更好的写法 （一般常用的就是type，default 根据实际需求来）
    props: {
       sattus:{
         type: String, // 类型
         required: true, // 是否必传
         default: '', // 默认值
         //default: function() {
           return {message: 'hello'}
          }, // 带默认值的对象或数组
         validator: function(value) {
         	return ['success', 'warning', 'danger'].indexOf(value) !== -1        
         } // 自定义验证函数
        }
    }

  • v-for必须配合key (key保证唯一就可以了)；

  • 避免v-if和v-for用在同一个元素上；

    • 实际应用如果需要这样做可以将v-if移至父元素上；
    • 或者将v-for的对象替换为计算属性，返回已经过滤掉后的数据（computed）；

  • 为组件样式设置作用域 也就是style标签上加scoped(只作用于当前组件)，或者class策略；

  • mixin和插件等扩展中的私有属性命名，推荐使用$_前缀；

强烈推荐（增强可读性）

  • 组件单独用一个文件分开，方便查找使用；

  • 单文件组件命名单词大写开头或者-分隔（HollyTree or holly-tree）;

  • 基础组件命名以特定的前缀开头 如Base V 等；

  • 单例组件名（每个页面只使用一次不接受prop）用 The前缀；

  • 与父组件紧密耦合的子组件应以父组件名为前缀；

  • 组件名中单词顺序，以高级别单词开头，描述性修饰词结尾；

  • 组件名大小写 (分不清各种模板暂时都这样写也没问题)

  • js中组件名首字母大写驼峰MyComponent;

  • prop名大小写js中使用驼峰,html中-分隔；

    1
    2
    3
    4
    5
    6
    7
    8
    props: {
        hollyTree: {
            type: String,
            default: ''
        }
    }
    // 组件上使用时
    holly-tree

  • 多个特性的元素上，每个特性一行（易读）；

    1
    2
    3
    4
    5
    <holly-tree
      :type="a"
      :flag="true"
      :status="200">
    </holly-tree>

  • 模板中只包含简单的表达式，复杂的逻辑则应该写在方法或计算属性里；

  • 复杂的计算属性分割为多个简单的属性；

  • 标签上的属性值带“” 或 ‘’；

  • 缩写 用：表示v-bing @表示v-on: ；

推荐

  • 组件/实例的顺序；（所有的都放一个实例里了，实际使用时不可能这样）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    export default({
        el: '',
        name: '',
        parent: '',
        functional: true,
        delimiters: ['${', '}'],
        comments: true,
        components: {},
        directives: {},
        filters: {},
        extends: {},
        mixins: [],
        inheritAttrs: true,
        model: {},
        props: {},
        data(){
            return {
                
            }
        },
        computed: {},
        watch: {},
        //生命周期
        beforeCreate() {},
        created(){},
        beforeMount(){},
        mounted(){},
        beforeUpdate(){},
        updated(){},
        activated(){},
        deactivated(){},
        beforeDestory(){},
        destroyed(){}
    	//非响应式属性
        methods: {},
        // 渲染
        template/render(){},
        renderError(){}
      )

  • 元素特性顺序；

    • 定义 is
    • 列表渲染 v-for
    • 条件渲染 v-if,v-else-if,v-else,v-show,-v-cloak
    • 渲染方式 v-pre,v-once
    • 全局 id
    • 唯一特性 ref,key,slot
    • 双向绑定 v-model
    • 其他特性
    • 事件 v-on
    • 内容 v-html,v-text

  • 实例中空行（易读）；

  • 顶级元素顺序 template script style 或12互换 保持一致；

谨慎使用

  • v-if,v-else使用时最好都加key,避免莫名其妙的问题；
  • scoped中避免使用元素选择器，用类选择器；
  • 优先使用prop和事件进行父子组件通信，避免使用this.$parent
  • 优先使用vuex做全局状态管理而不是this.$root或全局事件总栈
------ 本文结束------
0%