# 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）