像專業人員一樣驗證你的Vue Props
Vue 要求將傳遞給組件的任何數據顯式聲明為 props。此外，它還提供了一個強大的內置機制來驗證這些數據。這就像組件和消費者之間的合同一樣，確保組件按預期使用。
讓我們來探討一下這個強大的工具，它可以幫助我們在開發和調試過程中減少錯誤并增加我們的信心。
一、基礎知識
1.1 原始類型
驗證原始類型就像為原始類型構造函數設置類型選項一樣簡單。
export default {
props: {
// Basic type check
// (`null` and `undefined` values will allow any type)
propA: Number,
// Multiple possible types
propB: [String, Number],
// Required string
propC: {
type: String,
required: true
},
// Number with a default value
propD: {
type: Number,
default: 100
},
}
}
1.2 復雜類型
復雜類型也可以用同樣的方式進行驗證。
export default {
props: {
// 具有默認值的對象
propE: {
type: Object,
// 對象或數組默認值必須從一個工廠函數。該函數接收原始組件作為參數接收的props。
default(rawProps) {
return { message: 'hello' }
}
},
// 具有默認值的數組
propF: {
type: Array,
default() {
return []
}
},
// 具有默認值的函數
propG: {
type: Function,
// 與對象或數組默認不同，這不是工廠函數 - 這是一個用作默認值的函數
default() {
return 'Default function'
}
}
}
}
類型可以是以下值之一：
- Number
- String
- Boolean
- Array
- Object
- Date
- Function
- Symbol
另外，type 也可以是自定義類或者構造函數，斷言會通過 instanceof 檢查。例如，給定以下類：
class Person {
constructor(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
}
你可以像這樣把它作為一個 props 類型。
export default {
props: {
author: Person
}
}
二、高級驗證
2.1 驗證器函數
props 支持使用一個驗證器函數，這個函數接受 props 的原始值，并且必須返回一個布爾值來確定這個 props 是否有效。
// 自定義驗證器函數
prop: {
validator(value) {
// 該值必須與這些字符串之一匹配
return ['success', 'warning', 'danger'].includes(value)
}
},
2.2 使用枚舉
有時你想把數值縮小到一個特定的集合，這可以通過偽造這樣的枚舉來實現：
export const Position = Object.freeze({
TOP: "top",
RIGHT: "right",
BOTTOM: "bottom",
LEFT: "left"
});
可以在驗證器中導入和使用，也可以作為默認值。
<template>
<span :class="`arrow-position--${position}`">
{{ position }}
</span>
</template>
<script>
import { Position } from "./types";
export default {
props: {
position: {
validator(value) {
return Object.values(Position).includes(value);
},
default: Position.BOTTOM,
},
},
};
</script>
最后，父組件也可以導入和使用這個枚舉，從而消除我們應用程序中魔術字符串的使用。
<template>
<DropDownComponent :position="Position.BOTTOM" />
</template>
<script>
import DropDownComponent from "./components/DropDownComponent.vue";
import { Position } from "./components/types";
export default {
components: {
DropDownComponent,
},
data() {
return {
Position,
};
},
};
</script>
2.3 布爾型投射
布爾 prop 具有獨特的行為，屬性的存在與否可以決定prop值。
<!-- 相當于通過 :disabled="true" -->
<MyComponent disabled />
<!-- 相當于通過 :disabled="false" -->
<MyComponent />
三、TypeScript
將 Vue 的內置 prop 驗證與 TypeScript 相結合可以讓我們更好地控制這種機制，因為 TypeScript 原生支持接口和枚舉。
3.1 Interfaces
我們可以使用一個接口和PropType工具來注解復雜的 prop 類型，這確保了傳遞的對象將有一個特定的結構。
<script lang="ts">
import Vue, { PropType } from 'vue'
interface Book {
title: string
author: string
year: number
}
const Component = Vue.extend({
props: {
book: {
type: Object as PropType<Book>,
required: true,
validator (book: Book) {
return !!book.title;
}
}
}
})
</script>
3.2 真實枚舉
我們已經探索了如何在 Javascript 中偽造枚舉。這對于 TypeScript 來說是不需要的，因為枚舉是原生支持的。
<script lang="ts">
import Vue, { PropType } from 'vue'
enum Position {
TOP = 'top',
RIGHT = 'right',
BOTTOM = 'bottom',
LEFT = 'left',
}
export default {
props: {
position: {
type: String as PropType<Position>,
default: Position.BOTTOM,
},
},
};
</script>
四、Vue 3
當使用帶有 Options 或 Composition API 的 Vue 3 時，以上所有內容都有效。不同之處在于使用 <script setup> 時。必須使用 defineProps() 宏聲明道具，如下所示：
<script setup>
const props = defineProps(['foo'])
console.log(props.foo)
</script>
<script setup>
// 還支持長語法
defineProps({
title: String,
likes: Number
})
</script>
或者當使用帶有 <script setup> 的 TypeScript 時，可以使用純類型注釋來聲明 props：
<script setup lang="ts">
defineProps<{
title?: string
likes?: number
}>()
</script>
或使用接口：
<script setup lang="ts">
interface Props {
foo: string
bar?: number
}
const props = defineProps<Props>()
</script>
最后，在使用基于類型的聲明時聲明默認值：
<script setup lang="ts">
interface Props {
foo: string
bar?: number
}
// defineProps() 的反應性解構
// 默認值被編譯為等效的運行時選項ime option
const { foo, bar = 100 } = defineProps<Props>()
</script>
結束
隨著你的應用程序規模的擴大，類型檢查是防止錯誤的第一道防線。Vue的內置prop 驗證是引人注目的。結合TypeScript，它可以讓你對正確使用組件接口有很高的信心，減少bug，提高整體代碼質量和開發體驗。
原文：https://fadamakis.medium.com/validating-your-vue-props-like-a-pro-5a2d0ed2b2d6作者：Fotis Adamakis
