vue3中生命周期使用方式

在Vue 3中，生命周期的使用方式有两种：

第一种方式是通过配置使用生命周期钩子函数，在`setup()`外面配置。具体的生命周期函数包括：

- `beforeCreate`
- `created`
- `beforeMount`
- `mounted`
- `beforeUpdate`
- `updated`
`beforeUnmount`
- `unmounted`

例如，在组件中使用`beforeMount`和`mounted`生命周期函数：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  }
}
</script>

第二种方式是在组合式API中使用生命周期钩子函数。在组合式API中，`beforeCreate`和`created`相当于`setup()`，执行的时机高于配置项。具体的生命周期函数包括：

- `onBeforeMount`
- `onMounted`
- `onBeforeUpdate`
- `onUpdated`
- `onBeforeUnmount`
- `onUnmounted`

例如，在组合式API中使用`onBeforeMount`和`onMounted`生命周期函数：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { onBeforeMount, onMounted } from 'vue'

export default {
  setup() {
    const message = 'Hello, Vue 3!'

    onBeforeMount(() => {
      console.log('beforeMount')
    })

    onMounted(() => {
      console.log('mounted')
    })

    return {
      message
    }
  }
}
</script>