痛点

项目初期组件写得很快，半年后常见症状是：

  • props 越加越多
  • 事件命名混乱
  • 业务逻辑散在模板与组件里

要解决这些问题，关键是建立稳定的组件边界。

用 defineProps 和 defineEmits 明确契约

const props = defineProps<{
  modelValue: string
  disabled?: boolean
}>()

const emit = defineEmits<{
  (e: "update:modelValue", val: string): void
  (e: "submit"): void
}>()

契约清楚后，重构成本会明显降低。

分离容器组件与展示组件

  • 容器组件负责数据获取、状态管理
  • 展示组件只关心渲染和交互事件

这能避免“万能组件”不断膨胀。

组合式函数复用逻辑

export function usePagination() {
  const page = ref(1)
  const pageSize = ref(20)
  const setPage = (v: number) => (page.value = v)
  return { page, pageSize, setPage }
}

把重复逻辑提炼到 composable，比 mixin 更直观也更可控。

结语

Vue3 + TS 的上限很高，但前提是组件契约、职责边界、逻辑复用这三件事先做好。代码会更稳，也更容易协作。