在数组和对象数组中声明道具

Question

我刚刚发现，不是像这样定义组件的属性：

    const props = defineProps({
        id: Number,
        title: String,
        name: String,
    })

我可以这样做：

    defineProps([
        'id',
        'title',
        'name',
    ])

这似乎不需要 type 声明，但是这样做有什么缺点吗？ vue 是否自行决定每个属性的 type？

我正在使用 script setup。

Answer 1

缺点当然是安全性较差

vue是自己判断每个属性的类型吗？没有

当提供字符串数组时，Vue 根本不验证传递的 props 的类型，所以如果使用不正确（这更有可能发生，因为其他 devs/future 你无法分辨是什么应该在不阅读组件的其余代码的情况下传入）你最终会在组件中的某处出现一些运行时错误而不是干净的error/warning 关于作为 prop 传递的错误值（或者来自你的 IDE 的合理错误）

大多数时候你应该使用尽可能多的特定道具定义。

Answer 2

嗯，这不仅仅是 type 声明。

这是一个道具验证功能。完整的语法是

const props = defineProps({
    name: String,
    id: [ Number, String ],
    style: {
        type: Object,
        default: ()=>{
            color: "red",
            bg-color: "white"
        },
        validator: function (value) {
            return ['red', 'blue', 'green'].includes(value.color)
        }
    },
})

所以只使用命名道具的缺点是：

没有type safety。但即使在 typed props 的情况下，它也只会在开发版本中显示控制台警告。

而使用 prop 定义的优点是

单个道具的多个 types
道具的默认值
自定义验证器函数

在数组和对象数组中声明道具

Declaring props in array vs array of objects

vue.js

vuejs3