vue2 props的类型如果为对象或者数组，为什么默认值一定得是个函数

1. vue2 props的类型如果为对象或者数组，为什么默认值一定得是个函数？

在Vue 2中，当props的类型是对象（Object）或数组（Array）时，推荐使用函数来作为默认值的原因在于JavaScript中对象和数组是引用类型 。如果直接将一个对象或数组作为默认值，那么这个默认值会在内存中共享，导致所有使用该默认值的组件实例实际上共享的是同一个对象或数组的引用。

这意味着，如果一个组件实例修改了这个对象或数组，那么这个更改会影响到所有其他使用此默认值的组件实例，这通常不是我们期望的行为。

为了避免这种情况，Vue要求对于这类引用类型的props，其默认值应该通过一个函数来返回一个新的对象或数组实例。这样，每当创建一个新的组件实例时，都会调用这个函数，从而为每个实例提供一个独立的、不与其他实例共享的默认值。

例如：

props:{items:{type: Array,default:()=>[]// 返回一个新的空数组作为默认值},config:{type: Object,default:()=>({})// 返回一个新的空对象作为默认值}}

通过这种方式，每个组件实例的

items

和

config

prop都得到了自己独立的默认值副本，保证了数据的隔离性，防止了潜在的数据交叉污染问题。

更多详细内容，请**微信搜索“

前端爱好者

“**， 戳我 查看 。

2. vue2中props值的类型都有哪些？他们的默认值该如何设置？

2.1. props的值类型

在Vue 2中，props的值可以有多种类型，包括但不限于：

1. String（字符串）
2. Number（数字）
3. Boolean（布尔值）
4. Array（数组）
5. Object（对象）
6. Function（函数）
7. Date（日期）
8. Symbol（符号） - 在较新版本的Vue和JavaScript环境下可用
9. null 和 undefined - 也可以被用作prop的类型或默认值

设置这些props的默认值，你可以直接赋值（对于原始类型如字符串、数字、布尔值），而对于引用类型如数组或对象，则需要通过一个工厂函数来返回默认值，以确保每次组件实例化时都能获得一个新的实例，避免引用共享问题。

2.2. props默认值设置的示例

下面是不同类型的props及其默认值设置的示例：

Vue.component('my-component',{props:{// 字符串类型，默认为空字符串text:{type: String,default:''},// 数字类型，默认为0count:{type: Number,default:0},// 布尔类型，默认为falseisActive:{type: Boolean,default:false},// 数组类型，默认为空数组items:{type: Array,default:()=>[]},// 对象类型，默认为空对象config:{type: Object,default:()=>({})},// 函数类型，默认为空函数callback:{type: Function,default:()=>{}},// 日期类型，默认为当前日期date:{type: Date,default:()=>newDate()}},// ...其他组件逻辑});

这里，对于Array、Object、和Date这样的复杂类型，我们使用箭头函数来返回一个新的实例，以避免不同组件实例间共享同一默认值的问题。

而对于基本类型如String、Number、Boolean，直接赋予默认值即可，因为它们是值类型，不会存在引用共享的问题。

对于Function类型，虽然不是引用类型，但通常也推荐使用箭头函数来定义默认值，以保持一致性。