最佳实践

写出优雅、高效的 Vue 代码，让项目更加出色！💎

组件设计 🎨

使用 script setup 🍬

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const count = ref(0)
</script>

<template>
  <ChildComponent :count="count" />
</template>

Props 定义 📋

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

状态管理 🗄️

组合式函数 🔄

useUser.js

import { ref } from 'vue'

export function useUser() {
  const user = ref(null)
  const loading = ref(false)

  async function fetchUser(id) {
    loading.value = true
    user.value = await api.getUser(id)
    loading.value = false
  }

  return { user, loading, fetchUser }
}

组件命名规范

使用 PascalCase 命名组件

Props 验证

始终定义 props 类型和默认值

提取可复用逻辑

使用组合式函数

性能优化

使用 v-once 和 v-memo

🌸优秀的代码习惯，让你成为更好的开发者！💫