Props默认值中对象和数组必须用函数返回，否则多实例共享引用导致数据污染；基础类型可直接赋值，如String、Number、Boolean等；setup中defineProps同样需函数式默认值。

Props 设置默认值要用 函数返回值，尤其对象和数组必须用函数包裹，否则多个组件实例会共享同一份引用，导致数据污染。

基础类型默认值写法（简单安全）

字符串、数字、布尔等基础类型可以直接写默认值：

props: {
  title: {
    type: String,
    default: '默认标题'
  },
  count: {
    type: Number,
    default: 0
  },
  isActive: {
    type: Boolean,
    default: false
  }
}

对象/数组必须用函数返回（关键避坑点）

如果直接写 default: {} 或 default: []，所有组件实例会共用同一个对象或数组引用。修改一个实例的 props，其他实例也会跟着变。

正确写法是用函数返回新对象或新数组：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

立即学习“前端免费学习笔记（深入）”；

props: {
  userInfo: {
    type: Object,
    default() {
      return {
        name: '',
        age: 0
      }
    }
  },
  tags: {
    type: Array,
    default() {
      return []
    }
  }
}

带校验的默认值处理（更健壮）

可以结合 validator 和函数式默认值，确保传入数据结构合规：

props: {
  config: {
    type: Object,
    default() {
      return {
        theme: 'light',
        showHeader: true
      }
    },
    validator(value) {
      return typeof value.theme === 'string' && 
             typeof value.showHeader === 'boolean'
    }
  }
}

在 setup 中使用时注意（Vue 3 Composition API）

即使用了 defineProps，对象/数组默认值仍需函数形式：

const props = defineProps({
  list: {
    type: Array,
    default: () => [] // 必须是箭头函数或普通函数
  },
  meta: {
    type: Object,
    default: () => ({ loading: false })
  }
})

不复杂但容易忽略