VUE3：深入浅出defineProps 的 default 写法差异

为什么有不同的写法？

这是 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>

总结：