Vue3.0的生命周期

在Vue 3.0中，生命周期钩子被重命名并且分成了不同的阶段，以更加清晰地描述它们的执行时机。这些新的生命周期钩子包括：

1. setup(): 这是一个新的入口点，在beforeCreate和created之前调用。
2. onBeforeMount(): 在组件挂载到DOM上之前调用。
3. onMounted(): 组件挂载到DOM上之后调用。
4. onBeforeUpdate(): 在组件因响应性更新而即将重新渲染之前调用。
5. onUpdated(): 在组件因响应性更新而重新渲染之后调用。
6. onBeforeUnmount(): 在组件实例即将卸载之前调用。
7. onUnmounted(): 在组件实例卸载之后调用。
8. onErrorCaptured(): 当捕获一个来自子组件的错误时被调用。

以下是一个简单的例子，展示如何在Vue 3.0中使用这些生命周期钩子：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
import { ref, onMounted, onUnmount } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello Vue 3!');
 
    onMounted(() => {
      console.log('组件已挂载到DOM');
    });
 
    onUnmount(() => {
      console.log('组件已从DOM卸载');
    });
 
    // 返回值需要是响应式的，以便模板可以访问
    return { message };
  }
};
</script>

在这个例子中，setup()函数是所有组件逻辑的入口点。它返回一个对象，该对象的属性可以在模板中访问。onMounted()和onUnmounted()函数在组件挂载和卸载时被调用。