Vue 3 `<script setup>` 代码组织标准指南

#codequality #frontend #javascript #vue

组织顺序概览 (1-8 模式)

顺序	类别	说明
1	核心依赖引入	Vue 内置 API、插件、第三方通用库。
2	业务资源引入	自定义组件、自定义 Hooks、常量定义、API 函数。
3	组件通信定义	`defineProps` 与 `defineEmits`。
4	状态声明区	`ref`, `reactive`, Hooks 执行结果, Template Refs。
5	计算属性	`computed`。
6	逻辑方法	所有的交互函数、内部辅助函数。
7	副作用与监听	`onMounted`, `watch`, `watchEffect`。
8	对外暴露	`defineExpose`。

完整代码示例：用户管理弹窗

<script setup>
/** * 1. 核心依赖引入 
 */
import { ref, computed, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'

/** * 2. 业务资源引入 (组件、Hooks、API)
 */
import UserEditDialog from './components/UserEditDialog.vue'
import { useUserManagement } from '@/hooks/useUserManagement'
import { DEFAULT_ROLE } from '@/constants/user'

/** * 3. 组件通信定义 (Props & Emits)
 */
const props = defineProps({
  userId: { type: Number, default: null }
})
const emit = defineEmits(['refresh', 'close'])

/** * 4. 状态声明 (Hooks 执行, Refs, Template Refs)
 */
// 执行自定义 Hooks 获取共享逻辑
const { list, loading, submitting, loadList, saveUser } = useUserManagement()

// 模板引用 (对应模板中 ref="dialogRef")
const dialogRef = ref(null) 

// 本地私有响应式状态
const isEditMode = ref(false)
const searchQuery = ref('')

/** * 5. 计算属性 (Computed)
 */
const dialogTitle = computed(() => isEditMode.value ? '编辑用户' : '新增用户')

/** * 6. 逻辑方法 (Functions)
 */
const handleOpenAdd = () => {
  isEditMode.value = false
  dialogRef.value?.open()
}

const handleConfirmSave = async (data) => {
  const success = await saveUser(props.userId, data)
  if (success) {
    emit('refresh')
    dialogRef.value?.close()
  }
}

/** * 7. 生命周期钩子 & 监听器 (Lifecycle & Watchers)
 */
onMounted(() => {
  if (props.userId) {
    isEditMode.value = true
    loadList()
  }
})

watch(() => props.userId, (newId) => {
  console.log('用户 ID 变更为:', newId)
})

/** * 8. 对外暴露 (Expose)
 */
defineExpose({
  openAdd: handleOpenAdd,
  refresh: loadList
})
</script>

<template>
  <UserEditDialog ref="dialogRef" @save="handleConfirmSave" />
</template>