Vue：为数组属性设置默认值的最佳方法？

Question

我的组件有一个 prop orders，它是一个返回客户订单的数组。当组件挂载时，它会向父组件发出调用以进行 API 调用，然后刷新 prop。如果用户没有订单，订单很可能是一个空数组，其中我有一条消息说“此用户不存在订单”。
问题是，由于我将它作为数组类型的道具，道具的默认值为[]（空数组），因此即使在初始组件加载时，模板也会看到订单为[]并显示“没有订单存在消息”，但一秒钟后刷新道具时，它会显示订单。
我正在尝试将 orders 的初始值设置为 null，以便我可以处理尚未从 api 设置订单的特定情况。我尝试添加default: null，这样我就有了这样的道具：

props {
   orders: {type: Array, default: null}
}

但这仍然无法正常工作，因为 orders 属性在页面加载时仍然是一个空数组。

Answer 1

对于数组，您需要从函数中返回默认值，如下所示：

props {
  orders: { type: Array, default: function() { return null; }
}

你也可以使用箭头功能

props {
  orders: { type: Array, default: () => null }
}