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 {
       setup() {
         onUpdated(() => {
           console.log('Component has been updated!');
         });
       }
     };
     

5. onBeforeUnmount

   • 调用时机：在组件卸载之前调用。
   • 使用场景：清理工作，如取消事件监听器或清除定时器。
   • 示例：

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

6. onUnmounted

   • 调用时机：在组件卸载之后调用。
   • 使用场景：执行最终的清理操作，如释放资源或取消订阅。
   • 示例：

     import { onUnmounted } from 'vue';
     
     export default {
       setup() {
         onUnmounted(() => {
           console.log('Component has been unmounted!');
         });
       }
     };
     

7. onErrorCaptured

   • 调用时机：在捕获到后代组件的错误时调用。
   • 使用场景：处理组件树中的错误，如记录错误信息或显示错误提示。
   • 示例：

     import { onErrorCaptured } from 'vue';
     
     export default {
       setup() {
         onErrorCaptured((err, instance, info) => {
           console.error('Error captured:', err);
           return false; // 阻止错误继续向上传播
         });
       }
     };
     

8. onActivated 和 onDeactivated

   • 调用时机：分别在被缓存的组件激活和停用时调用。
   • 使用场景：在组件被缓存和恢复时执行特定逻辑，如重新获取数据或重置状态。
   • 示例：

     import { onActivated, onDeactivated } from 'vue';
     
     export default {
       setup() {
         onActivated(() => {
           console.log('Component is activated!');
         });
     
         onDeactivated(() => {
           console.log('Component is deactivated!');
         });
       }
     };
     

---

setup 函数详解

setup 是Vue 3组合式API的核心函数，用于替代Vue 2中的data、methods、computed等选项。它的主要作用包括：

1. 定义响应式数据：

   • 使用ref或reactive定义响应式数据。
   • 示例：

     import { ref, reactive } from 'vue';
     
     export default {
       setup() {
         const count = ref(0); // 基本类型
         const state = reactive({ name: 'Vue 3' }); // 对象类型
     
         return { count, state };
       }
     };
     

2. 定义方法：

   • 直接在setup中定义方法并返回。
   • 示例：

     import { ref } from 'vue';
     
     export default {
       setup() {
         const count = ref(0);
     
         const increment = () => {
           count.value++;
         };
     
         return { count, increment };
       }
     };
     

3. 使用生命周期钩子：

   • 在setup中调用生命周期钩子函数。
   • 示例：

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

4. 返回模板使用的数据和方法：

   • setup返回的对象可以直接在模板中使用。
   • 示例：

     import { ref } from 'vue';
     
     export default {
       setup() {
         const message = ref('Hello, Vue 3!');
         return { message };
       }
     };
     

5. 接收props和context：

   • setup接收两个参数：props和context。
   • props是组件的属性，context包含attrs、slots、emit等。
   • 示例：

     export default {
       props: ['title'],
       setup(props, context) {
         console.log('Props:', props.title);
         context.emit('custom-event', 'Hello from setup!');
       }
     };
     

---

完整示例

以下是一个完整的Vue 3组件示例，展示了setup和生命周期钩子的使用：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

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

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

    const increment = () => {
      count.value++;
    };

    onMounted(() => {
      console.log('Component is mounted!');
    });

    onUnmounted(() => {
      console.log('Component is unmounted!');
    });

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