# Vue 编码规范
# 组件命名
为了和其他业务页面进行区分,Vue 组件必须使用大驼峰命名方式。
- Button.vue # 按钮组件
- Radio.vue # 单选框组件
# 组件使用
为了区分自己开发的组件和第三方库组件,在命名方式上需要有所不同。
使用第三方库组件时,需要用小写字母。
<!-- element -->
<el-input></el-input>
<!-- vant -->
<van-button type="primary">主要按钮</van-button>
使用自己开发的组件,则需要使用大驼峰式命名。
<!-- 自己开发的 Button 组件 -->
<Button>按钮</Button>
# options API 选项的顺序
组件/实例的选项应该有统一的顺序。
这是我们推荐的组件选项默认顺序。它们被划分为几大类,所以你也能知道从插件里添加的新 property 应该放到哪里。
- 副作用 (触发组件外的影响)
el
- 全局感知 (要求组件以外的知识)
name
parent
- 组件类型 (更改组件的类型)
functional
- 模板修改器 (改变模板的编译方式)
delimiters
comments
- 模板依赖 (模板内使用的资源)
components
directives
filters
- 组合 (向选项里合并 property)
extends
mixins
- 接口 (组件的接口)
inheritAttrs
model
props
/propsData
- 本地状态 (本地的响应式 property)
data
computed
- 事件 (通过响应式事件触发的回调)
watch
- 生命周期钩子 (按照它们被调用的顺序)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
- 非响应式的 property (不依赖响应系统的实例 property)
methods
- 渲染 (组件输出的声明式描述)
template
/render
renderError
# v-for
出于性能考虑,必须为 v-for
设置 key
属性。key
的取值必须是唯一的,一般是使用 id
的值。
只有在找不到唯一值的情况下才允许使用 index
作为 key
。
# scoped
业务页面的 style
需要添加 scoped
属性来限制作用域。在开发组件时,为了方便在其他页面覆盖组件的样式,所以不建议添加 scoped
属性。
# 单文件组件顶级元素标签的顺序
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
# 空行
在多个方法之间添加一个空行,可以增加可读性(避免拥挤)。
methods: {
getName() {
},
getAge() {
},
}
# JSX
尽量使用单文件组件来开发业务页面,而不是 JSX,因为单文件组件可读性更强。只有在开发组件并且需要进行大量判断的情况下才建议使用 JSX(自由性更强)。
# 样式单独存放
通常情况下,样式是通过 <style>
标签写在 .vue
文件里的。但如果 css 样式多到数百行时,这时就需要将样式抽离出来单独放一个文件里。
// 抽离前
- Home.vue
// 样式抽离后
- Home
- index.vue
- index.css