vue3生命周期示例

在Vue 3中，生命周期钩子函数发生了一些变化。下面是一个示例，展示了Vue 3中常用的生命周期钩子函数：

<template>
  <div>
    <h2>Vue 3 生命周期示例</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  name: 'LifecycleExample',
  setup() {
    const message = ref('Hello, Vue 3!');

    // 在组件挂载之前调用
    onBeforeMount(() => {
      console.log('组件将要挂载');
    });

    // 在组件挂载之后调用
    onMounted(() => {
      console.log('组件已经挂载');
    });

    // 在组件更新之前调用
    onBeforeUpdate(() => {
      console.log('组件将要更新');    });

    // 在组件更新之后调用
    onUpdated(() => {
      console.log('组件已经更新');
    });

    // 在组件卸载之前调用
    onBeforeUnmount(() => {
      console.log('组件将要卸载');
    });

    // 在组件卸载之后调用
    onUnmounted(() => {
      console.log('组件已经卸载');
    });

    return {
      message
    };
  }
};
</script>

<style scoped>
h2 {
  color: #42b983;
}
</style>

在这个示例中，我们使用了`setup`函数来设置组件的逻辑。通过`import`语句导入了Vue 3中的生命周期钩子函数，包括`onBeforeMount`、`onMounted`、`onBeforeUpdate`、`onUpdated`、`onBeforeUnmount`和`onUnmounted`。每个生命周期钩子函数都有一个对应的回调函数，可以在其中执行需要的操作。

在示例中，我们通过打印信息到控制台来展示每个生命周期钩子函数被调用的时机。同时，在模板中使用了一个响应式变量`message`，并将其显示在页面上。

这只是一个简单的示例，你可以根据需要在不同的生命周期钩子函数中添加自己的逻辑。请注意，Vue 3中的生命周期钩子函数已经改名为`onXXX`，与Vue 2中的生命周期钩子函数名有所不同。