vue3组件生命周期

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

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

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

    // 在组件挂载后调用
    onMounted(() => {
      console.log('Component is mounted');
    });

    // 在组件更新后调用
    onUpdated(() => {
      console.log('Component is updated');
    });

    // 在组件卸载前调用
    onUnmounted(() => {
      console.log('Component is about to be unmounted');
    });

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

<style scoped>
/* 样式部分可以根据需要添加 */
</style>

解释说明：

1. setup() 函数：这是 Vue 3 中新的组合式 API 的入口，用于替代 Vue 2 中的 data、methods 等选项。
2. ref：用于定义响应式数据。在这个例子中，message 是一个响应式的字符串。
3. 生命周期钩子：
   • onMounted：在组件挂载完成后调用，类似于 Vue 2 中的 mounted。
   • onUpdated：在组件更新完成后调用，类似于 Vue 2 中的 updated。
   • onUnmounted：在组件卸载前调用，类似于 Vue 2 中的 beforeDestroy 或 unmounted。

这些生命周期钩子可以帮助你在不同的阶段执行特定的操作，比如初始化数据、清理资源等。