必须用函数式写法：当 default 值为 Object、Array、Date、RegExp 等引用类型时，否则多个组件实例共享同一引用导致状态污染；基础类型可用静态写法，但函数式更安全一致。
Vue.js 中通过 props 传递数据时，定义默认值有函数式写法和静态写法两种方式，核心区别在于：是否需要对引用类型做响应式保护、是否支持动态计算、以及在组件多次复用时的行为是否安全。
静态写法：适合基础类型，简单直接
直接给 prop 设置一个字面量值（如字符串、数字、布尔值、null），Vue 会原样使用：
props: {
title: {
type: String,
default: '默认标题' // ✅ 安全：字符串是基础类型
},
count: {
type: Number,
default: 0
}
}
⚠️ 注意：如果用静态写法给对象或数组设默认值，所有组件实例会共享同一个引用，导致状态污染：
props: {
list: {
type: Array,
default: [] // ❌ 危险！多个组件共用同一个数组
}
}
函数式写法：必须用于引用类型，默认值独立隔离
把 default 设为一个返回新对象/数组的函数，每次组件初始化都调用一次，确保每个实例拥有独立副本：
立即学习“前端免费学习笔记（深入）”；
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
props: {
userInfo: {
type: Object,
default() {
return { name: '', age: 0 } // ✅ 每次新建一个对象
}
},
items: {
type: Array,
default() {
return [] // ✅ 每次新建一个空数组
}
}
}
✅ 还支持动态逻辑，比如根据父组件其他 props 或运行时环境生成默认值：
- 可访问
this（仅限 Vue 2 的 options API；Vue 3 Composition API 中需在setup外部处理） - 可在函数内读取其他 props（Vue 2 支持，Vue 3 的
defineProps中不支持，需用computed或watch替代）
Vue 2 和 Vue 3 在函数式写法上的关键差异
Vue 2 的 default 函数中可以访问 this，而 Vue 3 的 defineProps 是编译时宏，default 函数无法访问组件实例上下文：
- Vue 2 示例（合法）：
default() { return this.parentId ? ['a'] : [] } - Vue 3 示例（不合法）：
default函数里不能用this，也不能访问其他 props；需改用computed或在setup中处理默认逻辑
所以 Vue 3 更推荐：基础默认值用函数式（保障引用类型安全），复杂依赖逻辑移至 setup 内部处理。
什么时候必须用函数式？一句话总结
只要 default 值是 Object、Array、Date、RegExp 等引用类型，就必须用函数式写法；基础类型（String / Number / Boolean / null / undefined）可用静态写法，但统一用函数式更一致、更不易出错。
