为什么有不同的写法？

这是 Vue 的设计约定：

• 基本类型（String, Number, Boolean）：直接写默认值
• 引用类型（Object, Array, Function）：必须用工厂函数返回默认值

为什么引用类型要用函数？ 因为如果直接写对象，所有组件实例会共享同一个对象引用，修改一个会影响所有组件！用函数每次返回一个新对象，就不会互相影响了。

完整示例

<template>
  <div class="props-demo">
    <h2>defineProps Default 写法示例</h2>
    
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
    <p>是否激活: {{ isActive }}</p>
    <p>用户信息: {{ userInfo.nickname }} - {{ userInfo.level }}</p>
    <p>标签列表: {{ tags.join(', ') }}</p>
    <p>格式化金额: {{ formatPrice(100) }}</p>
  </div>
</template>
<script setup>
// ========================================
// defineProps 的 default 写法详解
// ========================================

const props = defineProps({
  // ========== 基本类型：直接写默认值 ==========
  
  // String 类型
  name: {
    type: String,
    default: '游客'  // ✅ 直接写字符串
  },
  
  // Number 类型
  age: {
    type: Number,
    default: 18  // ✅ 直接写数字
  },
  
  // Boolean 类型
  isActive: {
    type: Boolean,
    default: false  // ✅ 直接写布尔值
  },

  // ========== 引用类型：必须用工厂函数 ==========
  
  // Object 类型 - 必须用函数返回！
  userInfo: {
    type: Object,
    // ❌ 错误写法：default: { nickname: '匿名', level: 1 }
    // ✅ 正确写法：用函数返回对象
    default: () => ({
      nickname: '匿名',
      level: 1
    })
    // 或者写成：
    // default() {
    //   return { nickname: '匿名', level: 1 }
    // }
  },
  
  // Array 类型 - 必须用函数返回！
  tags: {
    type: Array,
    // ❌ 错误写法：default: ['默认标签']
    // ✅ 正确写法：
    default: () => ['默认标签']
  },
  
  // Function 类型 - 比较特殊
  formatPrice: {
    type: Function,
    // 函数类型的默认值，直接写函数即可
    default: (price) => `¥${price.toFixed(2)}`
  }
})

// 使用 props
console.log(props.name, props.age)
</script>

总结：