vue

最近更新: 2025-10-10

Vue 3 专属实践规范

1. 组件规范

1.1 组件命名

<!-- 使用 PascalCase 命名组件文件 -->
<!-- UserProfile.vue -->
<template>
  <div class="user-profile">
    <!-- 内容 -->
  </div>
</template>

<script setup lang="ts">
// 组件逻辑
</script>

1.2 组件结构

<template>
  <!-- 模板内容 -->
</template>

<script setup lang="ts">
// 1. 导入
import { ref, computed, onMounted } from 'vue'
import type { User } from '@/types'

// 2. Props 定义
interface Props {
  userId: number
  showDetails?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  showDetails: false
})

// 3. Emits 定义
interface Emits {
  update: [user: User]
  delete: [id: number]
}
const emit = defineEmits<Emits>()

// 4. 响应式数据
const user = ref<User | null>(null)
const loading = ref(false)

// 5. 计算属性
const displayName = computed(() => 
  user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
)

// 6. 方法
const loadUser = async () => {
  loading.value = true
  try {
    // 加载用户数据
  } finally {
    loading.value = false
  }
}

// 7. 生命周期
onMounted(() => {
  loadUser()
})
</script>

<style scoped>
/* 样式 */
</style>

2. Composition API

2.1 响应式数据

import { ref, reactive, computed } from 'vue'

// 使用 ref 处理基本类型
const count = ref(0)
const message = ref('')

// 使用 reactive 处理对象
const state = reactive({
  user: null as User | null,
  loading: false,
  error: ''
})

// 计算属性
const doubleCount = computed(() => count.value * 2)

// 只读计算属性
const userDisplayName = computed(() => 
  state.user ? `${state.user.name} (${state.user.email})` : '未登录'
)

2.2 组合式函数 (Composables)

// composables/useUser.ts
import { ref, computed } from 'vue'
import type { User } from '@/types'

export function useUser() {
  const user = ref<User | null>(null)
  const loading = ref(false)
  const error = ref('')

  const isLoggedIn = computed(() => user.value !== null)

  const login = async (credentials: LoginCredentials) => {
    loading.value = true
    error.value = ''
    
    try {
      const response = await authApi.login(credentials)
      user.value = response.user
    } catch (err) {
      error.value = err instanceof Error ? err.message : '登录失败'
    } finally {
      loading.value = false
    }
  }

  const logout = () => {
    user.value = null
    // 清理相关状态
  }

  return {
    user: readonly(user),
    loading: readonly(loading),
    error: readonly(error),
    isLoggedIn,
    login,
    logout
  }
}