像專業人員一樣驗證你的Vue Props

語言: CN / TW / HK

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

gitee上擼了個類似飛書OKR輸入框的@提及項目