vue3钩子函数

// Vue 3 钩子函数示例

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

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

    // 在组件挂载时执行的钩子函数
    onMounted(() => {
      console.log('Component is mounted');
      // 可以在这里进行一些初始化操作，比如获取数据、设置定时器等
    });

    // 在组件卸载时执行的钩子函数
    onUnmounted(() => {
      console.log('Component is unmounted');
      // 可以在这里进行一些清理操作，比如清除定时器、取消订阅等
    });

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

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

1. ref: 用于创建一个响应式的变量 message。
2. onMounted: 这个钩子函数在组件挂载完成后调用。通常用于执行一些初始化操作，例如获取数据或设置定时器。
3. onUnmounted: 这个钩子函数在组件卸载前调用。通常用于执行一些清理操作，例如清除定时器或取消订阅。

以上代码展示了如何在 Vue 3 中使用这些钩子函数来管理组件的生命周期。