Vue 3中defineProps两种语法的区别是什么？

你遇到的是Vue 3 script setup中defineProps的两种不同声明方式，核心区别在于运行时校验优先和类型系统优先，具体差异如下：

1. 运行时声明写法（defineProps({})） #

这是从Vue 2延续过来的传统写法，直接在传入的对象中定义props的类型、默认值、校验规则等，所有配置直接作用于运行时。

示例代码：

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true,
    default: '默认标题'
  },
  count: {
    type: Number,
    validator: (value) => value >= 0 // 自定义校验规则
  }
})
</script>

• 兼容JavaScript和TypeScript项目，无需额外配置TS
• 直接支持完整的运行时校验逻辑，比如必填项检查、自定义校验函数
• Vue会自动根据声明推导TS类型，但精准度不如类型声明写法

2. 类型声明写法（defineProps<({})>()） #

这是Vue 3专为TypeScript项目设计的类型优先写法，通过TS的类型字面量或接口来定义props的类型结构，完全依托TS的类型系统。

基础示例：

<script setup lang="ts">
const props = defineProps<{
  title: string
  count?: number // 可选props
}>()
</script>

如果需要设置默认值，必须配合withDefaults宏使用：

<script setup lang="ts">
const props = withDefaults(defineProps<{
  title: string
  count?: number
}>(), {
  title: '默认标题',
  count: 0
})
</script>

• 仅适用于TypeScript项目，需要项目已配置TS环境
• 写法更简洁，贴合TS开发者的类型定义习惯，能获得最精准的TS类型提示
• 本身不支持运行时校验逻辑，如果需要校验，要么结合运行时声明写法，要么自行实现校验逻辑

核心差异对比 #

• 适用场景：运行时写法通用所有Vue项目；类型写法仅针对TS项目
• 配置能力：运行时写法内置默认值、校验规则；类型写法需用withDefaults处理默认值，无内置校验
• 类型精度：类型写法的TS类型提示更精准，运行时写法依赖Vue的类型推导
• 风格取向：运行时写法偏向Vue传统选项式思维；类型写法偏向TS的类型驱动思维

内容的提问来源于stack exchange，提问作者Waleed Tariq