vue3个生命周期解析，及setup

合理使用各生命周期，切勿乱用，不是所有东西都需要，合理使用可以提高效率和性能。

---

Vue 3 生命周期钩子详解

Vue 3的生命周期钩子分为以下几个阶段：

1. onBeforeMount

   • 调用时机：在组件挂载到DOM之前调用。
   • 使用场景：在挂载前进行一些初始化操作，如设置默认值或准备数据。
   • 示例：

     import { onBeforeMount } from 'vue';export default {setup() {onBeforeMount(() => {console.log('Component is about to be mounted!');});}
     };
     

2. onMounted

   • 调用时机：在组件挂载到DOM之后调用。
   • 使用场景：执行DOM操作、发起网络请求或初始化第三方库。
   • 示例：

     import { onMounted } from 'vue';export default {setup() {onMounted(() => {console.log('Component is mounted!');});}
     };
     

3. onBeforeUpdate

   • 调用时机：在组件更新之前调用，即在响应式数据变化后，DOM重新渲染之前。
   • 使用场景：在更新前获取DOM的当前状态或执行清理操作。
   • 示例：

     import { onBeforeUpdate } from 'vue';export default {setup() {onBeforeUpdate(() => {console.log('Component is about to update!');});}
     };
     

4. onUpdated

   • 调用时机：在组件更新之后调用，即DOM重新渲染之后。
   • 使用场景：在更新后执行DOM操作或检查更新后的状态。
   • 示例：

     import { onUpdated } from 'vue';export def