Vue 3 中的 defineProps：定义父组件传递的 Props

在 Vue 3 中，我们可以使用 defineProps 方法来定义我们组件的 props。这个方法有很多好处，比如：及时的类型检查、更好的可读性和更好的代码组织。

一、基础用法

在 Vue 3 中，我们可以使用 defineProps 来定义我们组件的 props。这个方法的用法非常简单：

const MyComponent = {
  props: {
    msg: String,
    count: Number,
    visible: Boolean
  },
  data() {
    return {
      // my data here
    }
  }
}

我们可以使用 defineProps 直接定义组件的 props：

import { defineComponent, defineProps } from 'vue'

const PropsComponent = defineComponent({
  setup() {
    const props = defineProps({
      msg: String,
      count: Number,
      visible: Boolean
    })

    return { props }
  }
})

在上面的例子中，我们定义了一个名为 PropsComponent 的组件，并使用 defineProps 来定义 props。接着，我们在 setup 中返回了这个 props 对象。

二、类型检查

使用 defineProps 可以进行类型检查，这为我们的组件增加了更多的可靠性。

例如，如果我们将传递给 props 的值的类型与定义的类型不匹配，将会收到警告，这使得我们可以尽早地识别问题，而不会在组件里面遇到运行时错误：

PropsComponent.props = {
  msg: String,
  count: Number
};

// Expect warning
const instance = mount(MyComponent, {
  props: {
    msg: 42,
    count: 'fourty-two'
  }
});
console.log(instance.html());

在上面的例子中，由于我们传递了一个错误类型的数据，我们将会看到一个警告。这让我们可以快速处理这个问题，而不是在组件中遇到错误。

三、更好的可读性和更好的代码组织

使用 defineProps 使我们的代码更有可读性和更好的代码组织。它使我们的代码更加模块化，因为我们可以将 props 定义放在一个单独的函数中，并将其作为一个对象传递给组件。

const props = defineProps({
  msg: String,
  count: Number,
  visible: Boolean
})

const MyComponent = {
  props,
  data() {
    return {
      // my data here
    }
  }
}

在上面的例子中，我们将 defineProps 的返回值赋给了一个变量，并将它传递给了组件的 props 选项中。这使得我们的代码更加模块化和可维护性更高。

四、Props 校验

我们可以通过定义一个 validator 属性来为 props 提供自定义的检验器。

const props = defineProps({
  count: {
    type: Number,
    required: true,
    validator: (value) => value > 0 && value < 100
  }
})

const MyComponent = {
  props,
  data() {
    return {
      // my data here
    }
  }
}

在上面的例子中，我们定义了一个 count 属性，并将它定义为 Number 类型，且必须被传递。此外，我们还定义了一个自定义的检查器，它会检查 count 的值是否在 0 到 100 之间。

五、完整代码

以下是一个具有实际功能的代码示例，它演示了如何使用 defineProps 以及如何处理 props 的生命周期钩子：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ count }}</p>
    <p>{{ visible }}</p>
  </div>
</template>

<script>
import { defineComponent, defineProps } from 'vue'

const PropsComponent = defineComponent({
  props: {
    title: String
  },
  setup(props) {
    const myProps = defineProps({
      count: Number,
      visible: Boolean
    })

    return { myProps }
  },
  created() {
    console.log('Component created.')
  },
  mounted() {
    console.log('Component mounted.')
  },
  updated() {
    console.log('Component updated.')
  },
  destroyed() {
    console.log('Component destroyed.')
  }
})
</script>

六、总结

在 Vue 3 中，defineProps 为我们提供了一个声明式的方法来定义 props。这使得我们的组件更加模块化，更加可读性强，同时还可以进行类型检查和自定义校验。

然而，我们需要谨慎使用 defineProps，因为这个方法会影响组件的性能，所以只有在必要的时候才应该使用它。