Vue组合式API+TS独立模块开发中如何保留props默认值与响应式

之前两种迁移写法的核心缺陷来自对Vue组合式API运行机制的误解：

• 第一种写法仅给组合式函数增加了TS类型标注，没有将带default、type的Prop配置传递给组件的defineProps，Vue运行时无法识别Prop的默认值规则，默认值逻辑完全失效。
• 第二种写法直接在函数参数位置解构取值，一方面将组合式函数的参数默认值等同于Vue Prop的默认值，实际上这部分配置根本没有被组件注册；另一方面直接解构响应式props对象会打破响应式链路，父组件更新传入值时，内部拿到的常量值不会同步变化。

Vue官方推荐的可复用Prop配置迁移逻辑，全程不需要破坏响应式、不需要重复编写类型，完全等价于原mixin的行为：

步骤1：抽出可复用的Prop配置 #

将原mixin中的Prop定义抽成独立的带类型校验的配置对象，作为整个逻辑的单一来源：

// useAnimation.ts
import { ref, toRefs, type PropType } from 'vue'

// 独立可复用的Prop定义，带类型、默认值配置
export const animationProps = {
  time: {
    type: [String, Number] as PropType<string | number>,
    default: 1,
  },
  iterations: {
    type: [String, Number] as PropType<string | number>,
    default: 1,
  },
} as const

步骤2：实现组合式逻辑 #

组合式函数接收组件传入的、经过Vue解析的响应式props对象，通过toRefs解构取值，避免丢失响应性：

export const useAnimation = (props: typeof animationProps) => {
  const animation = ref('')
  // 用toRefs解构prop值，保留完整响应式
  const { time, iterations } = toRefs(props)

  const animate = () => {
    animation.value = `move ${time.value}s ease-in-out ${iterations.value} forwards`
  }

  return {
    animation,
    animate,
  }
}

小提示：如果觉得toRefs转ref的写法繁琐，也可以直接在animate函数内通过props.time、props.iterations访问值——props本身是Vue生成的响应式对象，直接访问属性不会破坏响应链路。

步骤3：组件侧接入 #

组件直接复用抽出的Prop配置定义，不需要重复编写类型和默认值：

<script setup lang="ts">
import { animationProps, useAnimation } from './useAnimation'
// 直接复用独立Prop配置，自动获得类型校验、默认值解析能力
const props = defineProps(animationProps)
// 把响应式props传入组合式逻辑
const { animation, animate } = useAnimation(props)
</script>

• 完全兼容原mixin行为：Vue运行时会自动解析Prop类型、填充默认值，和原选项API下的mixin表现完全一致
• 类型零重复：通过typeof animationProps自动推导Prop的TS类型，不需要手动编写接口，避免类型和实际配置不一致的问题
• 响应式无丢失：所有从props中解构出的值都是响应式ref，父组件更新传入的time/iterations值时，内部动画逻辑会自动同步最新值
• 无mixin的固有缺陷：不会出现命名冲突、来源不清晰的问题，逻辑复用链路完全可追溯

内容的提问来源于stack exchange，提问作者v-moe