Invalid default value for prop "card": Props with type Object/Array must use a factory function to return the default

<think>好的，用户现在遇到了一个关于Vue prop默认值的错误信息：“Invalid default value for prop 'card': Props with type Object/Array must use a factory function to return the default”。我需要先理解这个错误的含义，然后给出解决方案。 首先，这个错误通常出现在Vue组件中定义props的时候，当prop的类型是Object或Array时，如果直接给默认值一个对象或数组字面量，就会报这个错。Vue要求对于对象或数组类型的prop，必须使用工厂函数返回默认值，而不是直接赋值。 接下来，我要回顾Vue的官方文档，确认这个规则。是的，Vue确实有这样的要求，这是因为对象和数组在JavaScript中是引用类型，直接使用字面量作为默认值会导致所有组件实例共享同一个对象或数组，引发意外的副作用。因此，必须通过函数返回一个新的对象或数组，确保每个实例都有独立的默认值。 用户可能不太清楚这个机制，所以需要解释清楚原因。然后，给出具体的错误示例和正确的写法。比如，用户可能写了类似card: { type: Object, default: {} }，这时候应该改成card: { type: Object, default: () => ({}) }。 另外，用户可能需要知道其他类型的prop是否需要这样做，比如String、Number等基本类型，可以不用工厂函数。这时候需要说明不同数据类型的处理方式，避免混淆。 还要考虑用户是否在数组类型上犯了同样的错误，比如default: []，应该改成default: () => []。给出不同数据类型的示例，帮助用户全面理解。 可能用户的问题还涉及到更复杂的默认值结构，比如嵌套对象或数组，这时候需要确保工厂函数返回正确的结构，并且可能提醒用户注意深拷贝的问题，如果默认值需要复杂结构的话。 最后，总结关键点，强调工厂函数的作用和必要性，帮助用户记住这个规则，避免未来再出现类似的问题。这个</think>错误 **`Invalid default value for prop "card": Props with type Object/Array must use a factory function to return the default`** 是 Vue 中定义组件 Props 时的常见问题，通常出现在以下场景： --- ### **错误原因** - **对象或数组类型的 Props 默认值未使用工厂函数** 在 Vue 中，如果 Prop 的类型是 `Object` 或 `Array`，且需要设置默认值（`default`），必须通过 **工厂函数**（返回新对象的函数）提供默认值，而不是直接赋值一个对象或数组。 ```javascript // ❌ 错误写法：直接赋值对象 props: { card: { type: Object, default: {} // 直接赋值空对象，会报错！ } } // ❌ 错误写法：直接赋值数组 props: { list: { type: Array, default: [] // 直接赋值空数组，会报错！ } } ``` --- ### **解决方案** 使用 **工厂函数** 返回默认值，确保每次组件实例化时生成一个全新的对象或数组，避免多个组件实例共享同一引用导致副作用。 #### 1. **对象类型 Props** ```javascript props: { card: { type: Object, default: () => ({}) // ✅ 正确写法：工厂函数返回空对象 // 或返回带初始值的对象 // default: () => ({ id: 1, name: "默认卡片" }) } } ``` #### 2. **数组类型 Props** ```javascript props: { list: { type: Array, default: () => [] // ✅ 正确写法：工厂函数返回空数组 // 或返回带初始值的数组 // default: () => [1, 2, 3] } } ``` --- ### **为什么必须用工厂函数？** - **避免引用共享问题** JavaScript 中对象和数组是引用类型。如果直接赋值 `default: {}`，所有组件实例会共享同一个默认对象，修改一个实例的 Prop 会影响其他实例。 - **确保数据独立性** 工厂函数每次返回新对象/数组，保证每个组件实例的默认值是独立的。 --- ### **其他数据类型的默认值** - **基本类型（String、Number、Boolean 等）** 可以直接赋值默认值，无需工厂函数： ```javascript props: { title: { type: String, default: "默认标题" // ✅ 直接赋值 }, count: { type: Number, default: 0 // ✅ 直接赋值 } } ``` --- ### **示例场景** 假设有一个卡片组件 `<CardComponent>`，接收一个 `card` 对象类型的 Prop： ```vue <script> export default { props: { // ✅ 正确写法 card: { type: Object, default: () => ({ id: 0, title: "默认卡片", content: "这里是默认内容" }) } } } </script> ``` -- ### **关键点** - **对象/数组类型**的 Prop 默认值必须用 `() => ({})` 或 `() => []`。 - **基本类型**（如 String、Number）可以直接赋值。 - 始终通过工厂函数确保默认值的独立性，避免不可预期的副作用。