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>
/* 样式部分 */
</style>

解释说明：

1. ref：用于创建响应式的数据。在这个例子中，message 是一个响应式的字符串。
2. onMounted：这是一个生命周期钩子，在组件挂载完成后调用。你可以在这里执行一些初始化操作，比如获取数据或设置监听器。
3. onUnmounted：这是另一个生命周期钩子，在组件卸载前调用。你可以在这里清理资源，比如取消订阅或清除定时器，以避免内存泄漏。

通过这些生命周期钩子，你可以更好地控制组件的生命周期，确保在适当的时间执行特定的操作。