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，因為這個方法會影響組件的性能，所以只有在必要的時候才應該使用它。