Vue风格指南

refer to https://v3.cn.vuejs.org/style-guide/

1. 必要的 Necessary

• 组件名为多个单词

todo ❌ todo-item/TodoItem ✅

• Prop定义尽量详细

Props:{
    status: String
    another:{
        type: String,
        required: true,
        default: 'synced',
        validator: value => {
            return ['syncing','synced','version-conflict','error'].includes(value)
        }
    }
}

• v-for设置key值

:key="item.id"

• v-if不和v-for一起使用

v-if优先级高于v-for，对于v-for="user in users" v-if="user.isActive"，可能会抛出错误

• SFC设置样式作用域

<style scoped></style>
<style module></style>

• 若无法保证模块作用域，对于插件、mixin等不公开api使用私有property名称

这一点我看vant源码的mixin中倒也没有遵守…

_为Vue私有property $为Vue暴露给用户的实例property 因此 $_pluginName_api 最为合适

2. 强烈推荐 Highly recommend

• 将每个组件单独分成文件

• SFC文件名要么始终是大驼峰PascalCase要么始终是横线连接kebab-case

myComponent.vue/mycomponent.vue ❌ MyComponent.vue/my-component.vue ✅

• 定义统一的基础组件文件名前缀

基础组件指，只包括HTML元素、其他基础组件、第三方UI的组件，绝不包括全局状态等，比如Vuex store。这些基础组件应有一个统一的前缀。

MyButton.vue VueTable.vue Icon.vue ❌
BaseButton.vue BaseTable.vue BaseIcon.vue ✅

• 单例组件文件名以The为前缀

单例组件指每个页面中此组件只会被使用一次，且此组件永远不接受任何prop。如果发现有必要添加prop，说明这个组件实际上是可复用的，不算单例组件。

MySidebar.vue ❌ TheSidebar.vue ✅

• 紧密耦合组件名称

紧密耦合父子组件，子组件以父组件名称作为前缀。

个人觉得详解中使用目录嵌套解决也是可行的。

• 组件名称的单词顺序

以高阶（一般性的描述）单词为开头，描述性的修饰词为结尾。

这一点不太好遵守。随需求的增加，高阶的定义可能会改变。

• 自闭合组件

DOM模版中的组件不要自闭合。

单文件组件、字符串模版、JSX：<MyComponent />

DOM模版：<my-component></my-component>

关于DOM模版和字符串模版的区别：DOM模版是直接写在页面上的，浏览器加载时就会渲染的html结构，比如<child></child>。字符串模版是写在js里的，不立即参与渲染的。

懒得记就都不要自闭和。

• 模版中组件名大小写

都用kebab-case

• JS/JSX中使用的组件名

一律PascalCase或kebab-case，不要小驼峰。但在组件命名export default{name:''}中，name必须PascalCase

• 组件名尽量少使用缩写

• prop命名

js中使用camelCase，HTML中使用kebab-case

• 多个attribute的元素，每个attribute一行

• 模版中只应包含简单表达式

• 复杂计算属性拆分成更多小计算属性。解耦。

• attribute值带引号

• 指令缩写要么都用要么都不用

3. 推荐 Recommend

• export default {
  name,
  compilerOptions,
  components,
  directives,
  extends,
  mixins,
  provide/inject,
  inheritAttrs,
  props,
  emits,
  setup,
  data,
  computed,
  watch,
  beforeCreate,
  created,
  beforeMount,
  mounted,
  beforeUpdate,
  updated,
  activated,
  deactivated,
  beforeUnmount,
  unmounted,
  errorCaptured,
  renderTracked,
  renderTriggerd,
  methods,
  template/render,
  }

• <my-component is v-for v-if v-else-if v-else v-show v-cloak v-pre v-once id ref key v-model Attributes v-on v-html v-text />