在數組和物件數組中聲明 props

Question

我剛剛發現，不要像這樣定義元件的屬性：

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

我可以這樣做：

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

這似乎不需要 type 聲明，但是這樣做有什麼缺點嗎？ vue是否自己確定每個屬性的type？

我正在使用 script setup。

Answer 1

這不僅僅是 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)
        }
    },
})

因此，只使用命名道具的缺點是：

1. 沒有 類型安全性 。但即使在 typed props 的情況下，它也只會在開發建置中顯示控制台警告。

而使用 prop 定義的優點是

1. 單一 prop 的多個 types
2. 道具的預設值
3. 自訂驗證器函數

Answer 2

缺點當然是安全性較差。

vue 會自行決定每個屬性的型別嗎？ 不會

當提供字串陣列時，Vue 根本不會驗證傳遞的props 的類型，因此如果使用不正確（這種情況更有可能發生，因為其他開發者/未來你無法知道應該傳遞什麼不閱讀元件的其餘程式碼）您最終會在元件中的某個位置出現一些執行時間錯誤，而不是關於作為prop 傳遞的錯誤值的乾淨錯誤/警告（或來自IDE 的合理錯誤）

大多數時候，您應該使用盡可能多的特定道具定義。