Vue3 + TypeScript 组件模式：从能用到可维护
痛点 项目初期组件写得很快，半年后常见症状是： 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 的上限很高，但前提是组件契约、职责边界、逻辑复用这三件事先做好。代码会更稳，也更容易协作。