194 lines
4.9 KiB
Markdown
194 lines
4.9 KiB
Markdown
# Vue 命名规范
|
||
|
||
> 本规范适用于 Vue2 和 Vue3。两者在命名规范上基本一致，主要区别在于 API 风格（Options API vs Composition API）。
|
||
|
||
## 规则
|
||
|
||
1. **文件名**：
|
||
- 组件文件使用大驼峰命名法（PascalCase）。
|
||
- 示例：`UserProfile.vue`、`OrderList.vue`
|
||
- 视图页面文件使用 `View` 后缀：`UserListView.vue`、`OrderDetailView.vue`
|
||
|
||
2. **组件名（Component Name）**：
|
||
- 在 `components` 目录中的组件使用多单词命名，避免与 HTML 标签冲突。
|
||
- 示例：`BaseButton.vue`、`ThemePicker.vue`、`UserAvatar.vue`
|
||
- 视图组件使用 `View` 后缀。
|
||
|
||
3. **模板中组件引用**：
|
||
- 在模板中使用大驼峰（PascalCase）或短横线（kebab-case）均可，建议统一使用大驼峰。
|
||
- 示例：`<BaseButton>` 或 `<base-button>`
|
||
|
||
4. **Props 命名**：
|
||
- 声明时使用小驼峰（camelCase）。
|
||
- 在模板中传递时使用短横线（kebab-case）。
|
||
- 示例：
|
||
```javascript
|
||
// 声明
|
||
props: {
|
||
userName: String,
|
||
orderList: Array
|
||
}
|
||
```
|
||
```html
|
||
<!-- 使用 -->
|
||
<user-profile user-name="John" order-list="orders"></user-profile>
|
||
```
|
||
|
||
5. **Emits 命名**：
|
||
- 使用短横线（kebab-case）。
|
||
- 示例：`update:user-name`、`delete-order`
|
||
|
||
6. **数据属性（Data Properties）**：
|
||
- 使用小驼峰（camelCase）。
|
||
- 避免与 props 同名。
|
||
- 示例：`searchQuery`、`isLoading`
|
||
|
||
7. **方法名（Methods）**：
|
||
- 使用小驼峰（camelCase）。
|
||
- 动词开头，清晰表达动作。
|
||
- 示例：`handleSubmit`、`fetchOrders`、`toggleMenu`
|
||
|
||
8. **计算属性（Computed）**：
|
||
- 使用小驼峰（camelCase）。
|
||
- 名词或名词短语表示派生数据。
|
||
- 示例：`formattedName`、`filteredOrders`、`isLoading`
|
||
|
||
9. ** watchers**：
|
||
- 方法名与被监听的属性同名。
|
||
- 示例：`watch: { searchQuery(newValue) { ... } }`
|
||
|
||
10. **CSS 类名**：
|
||
- 使用短横线连接（kebab-case）。
|
||
- 若使用 scoped CSS，建议添加组件名前缀。
|
||
- 示例：`.user-profile-header`、`.order-list-item`
|
||
|
||
11. **组合式函数（Composition API - Vue3 特有）**：
|
||
- 文件名以 `use` 开头，使用小驼峰。
|
||
- 示例：`useFetch.js`、`useMouse.js`
|
||
- 函数名以 `use` 开头，使用小驼峰。
|
||
- 示例：`function useFetch(url) { ... }`
|
||
|
||
12. **响应式变量（Composition API）**：
|
||
- 使用小驼峰（camelCase）。
|
||
- ref 变量：`count`、`userName`
|
||
- reactive 对象：`state`、`form`
|
||
|
||
13. **Provide / Inject**：
|
||
- 使用 Symbol 或字符串常量。
|
||
- 命名清晰表达提供的功能。
|
||
- 示例：`provide('currentUser', user)`、`inject('currentUser')`
|
||
|
||
## Vue2 与 Vue3 的差异说明
|
||
|
||
| 项目 | Vue2 (Options API) | Vue3 (Composition API) |
|
||
|------|-------------------|----------------------|
|
||
| **数据定义** | `data()` 返回对象 | `ref()` 或 `reactive()` |
|
||
| **方法定义** | `methods` 选项 | 直接在 `setup()` 中定义 |
|
||
| **计算属性** | `computed` 选项 | `computed()` 函数 |
|
||
| **侦听器** | `watch` 选项 | `watch()` 或 `watchEffect()` 函数 |
|
||
| **命名规范** | ✅ 相同 | ✅ 相同 |
|
||
|
||
> **结论**：Vue2 和 Vue3 在命名规范上没有本质差异，仅 API 使用方式不同。
|
||
|
||
## 示例
|
||
|
||
### 正确示例
|
||
|
||
```vue
|
||
<!-- UserProfile.vue -->
|
||
<template>
|
||
<div class="user-profile">
|
||
<base-button @click="handleClick">Click Me</base-button>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'UserProfile',
|
||
props: {
|
||
userName: String,
|
||
userAge: Number
|
||
},
|
||
emits: ['update:userName'],
|
||
data() {
|
||
return {
|
||
isActive: false
|
||
}
|
||
},
|
||
methods: {
|
||
handleClick() {
|
||
this.$emit('update:userName', 'New Name')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.user-profile {
|
||
padding: 20px;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### Composition API 示例（Vue3）
|
||
|
||
```vue
|
||
<!-- UserProfile.vue -->
|
||
<template>
|
||
<div class="user-profile">
|
||
<base-button @click="handleClick">Click Me</base-button>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import BaseButton from './BaseButton.vue'
|
||
|
||
const props = defineProps({
|
||
userName: String,
|
||
userAge: Number
|
||
})
|
||
|
||
const emit = defineEmits(['update:userName'])
|
||
|
||
const isActive = ref(false)
|
||
|
||
const handleClick = () => {
|
||
emit('update:userName', 'New Name')
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.user-profile {
|
||
padding: 20px;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### 错误示例
|
||
|
||
```vue
|
||
<!-- user-profile.vue --> <!-- ❌ 文件名应为大驼峰 -->
|
||
<template>
|
||
<div class="userprofile"> <!-- ❌ 类名应使用短横线 -->
|
||
<button @click="clickme">Click</button> <!-- ❌ 方法名应使用小驼峰 -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
isactive: false // ❌ 变量名应使用小驼峰
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## 适用范围
|
||
|
||
- Vue2 项目（Options API）
|
||
- Vue3 项目（Options API 和 Composition API）
|
||
- Vue 组合式函数（Composables）
|