vue3 钩子函数

// Vue 3 钩子函数示例

<template>
  <div>
    <p>生命周期钩子示例</p>
  </div>
</template>

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

export default defineComponent({
  name: 'LifeCycleHooksExample',
  setup() {
    // onMounted 钩子函数，在组件挂载完成后调用
    onMounted(() => {
      console.log('组件已挂载');
      // 可以在这里执行一些初始化操作，例如获取数据、设置定时器等
    });

    // onUnmounted 钩子函数，在组件卸载之前调用
    onUnmounted(() => {
      console.log('组件即将卸载');
      // 可以在这里清理资源，例如清除定时器、取消订阅等
    });

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

解释说明：

1. onMounted：该钩子函数在组件挂载完成后调用。你可以在这里执行一些初始化操作，例如发送网络请求获取数据、设置定时器等。
2. onUnmounted：该钩子函数在组件卸载之前调用。你可以在这里清理资源，例如清除定时器、取消订阅等，避免内存泄漏。

通过使用这些钩子函数，你可以更好地控制组件的生命周期行为。