vue3的生命周期

// Vue 3 生命周期示例代码

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

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

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

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

    // 在组件卸载前执行
    onUnmounted(() => {
      console.log('Component is about to be unmounted');
      // 可以在这里清理资源，比如清除定时器、取消订阅等
    });

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

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

解释说明

在 Vue 3 中，生命周期钩子函数的使用方式与 Vue 2 有所不同。Vue 3 引入了组合式 API（Composition API），使得生命周期钩子函数可以通过 setup 函数中的钩子函数来实现。

• onMounted: 组件挂载完成后调用，可以在这里进行一些初始化操作。
• onUnmounted: 组件卸载前调用，可以在这里清理资源，避免内存泄漏。

以上代码展示了如何在 Vue 3 中使用这些生命周期钩子。