Vue风格指南

2021-08-25 本文已影响0人科科Cole

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

必要的 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设置样式作用域

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

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

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

强烈推荐 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值带引号
指令缩写要么都用要么都不用

推荐 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 />

Vue风格指南

猜你喜欢

热点阅读