【解决方案】【最佳实践】vue3.0生命周期、组合式API（示例代码+详细讲解+中文图解）

     前段时间，发布了关于vue2.0的生命周期的文章：

   【解决方案】【最佳实践】vue2.0生命周期、运行机制（详细讲解+中文图解）

       我没有把vue2.0生命周期和vue3.0生命周期写在一起，因为写在一起对于初学者来说，容易搞混。后面会专门出一期vue2.0生命周期和vue3.0生命周期对比的文章。深入浅出，共同学习。

在Vue 3.0中，生命周期钩子被重命名并且分成了不同的阶段。这是为了更好地描绘组件的整个生命周期，并且使得钩子的用途更加清晰。

Vue 3.0中的生命周期钩子以及它们的用途：

1. setup(): 这不是一个生命周期钩子，而是一个组合API的入口，在这里可以访问到响应式数据和生命周期钩子。

2. onBeforeMount(): 在挂载开始之前调用。

3. onMounted(): 组件被挂载后调用。

4. onBeforeUpdate(): 在组件因响应式数据更新而准备重新渲染之前调用。

5. onUpdated(): 在组件重新渲染之后调用。

6. onBeforeUnmount(): 在组件卸载前调用。

7. onUnmounted(): 在组件卸载后调用。

图例-Vue 3.0中的生命周期

代码示例-展示如何在Vue 3.0中使用这些生命周期钩子：

<template>
  <div>{
  
  { count }}</div>
</template>
 
<script>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';
 
export default {
  se