likes
comments
collection
share

像专业人员一样验证你的Vue Props

作者站长头像
站长
· 阅读数 33

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: {
    // Object with a default value
    propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function. The function receives the raw
      // props received by the component as the argument.
      default(rawProps) {
        return { message: 'hello' }
      }
    },
    // Array with a default value
    propF: {
      type: Array,
      default() {
        return []
      }
    },
    // Function with a default value
    propG: {
      type: Function,
      // Unlike object or array default, 
      // this is not a factory function 
      // - this is a function to serve as a default value
      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 是否有效。

// Custom validator function
prop: {
  validator(value) {
    // The value must match one of these strings
    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>
// Long synstax is also supported
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
}
// reactive destructure for defineProps()
// default value is compiled to equivalent runtime option
const { foo, bar = 100 } = defineProps<Props>()
</script>

结束

随着你的应用程序规模的扩大,类型检查是防止错误的第一道防线。Vue的内置prop 验证是引人注目的。结合TypeScript,它可以让你对正确使用组件接口有很高的信心,减少bug,提高整体代码质量和开发体验。


原文:fadamakis.medium.com/validating-… 作者:Fotis Adamakis

转载自:https://juejin.cn/post/7144252068801282078
评论
请登录