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 default