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

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

     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>