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，其他实例也会跟着变。

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

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

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 })
  }
})

不复杂但容易忽略

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！