生命周期

Fri, 04 Oct 2024 00:00:00 +0800

vue3生命周期

在Vue中，生命周期指的是Vue实例从创建到销毁的过程。在这个过程中，Vue实例会经历一系列的阶段，包括数据观测、模板编译、挂载DOM、更新DOM、卸载等等。在这些阶段，Vue提供了一些生命周期钩子函数，让我们可以在特定的时机执行某些代码。

为什么需要生命周期

生命周期钩子函数为我们提供了在Vue实例生命周期不同阶段执行代码的能力。这对于非响应式的操作非常有用，例如直接操作DOM、添加事件监听器或者创建定时器等。这些操作如果在数据变化时执行可能会导致不必要的性能开销，而生命周期钩子函数让我们可以更合理地安排这些操作的执行时机。一些常用的库，例如react，webpack都提供了生命周期的钩子，方便开发者理解整个运行流程。

Vue3 有哪些生命周期，分别在什么时候调用？

Vue3的生命周期钩子函数主要包括：

beforeCreate: 创建实例之前调用，此时实例的数据观测、事件等还未初始化。
created: 创建实例后调用，此时实例的数据观测、事件等已经初始化完成。
beforeMount: 挂载实例之前调用，此时模板已经编译完成，但是还未挂载到DOM。
mounted: 挂载实例后调用，此时实例已经挂载到DOM，可以进行DOM操作。
beforeUpdate: 数据更新之前调用，此时可以进行状态的最后更改。
updated: 数据更新后调用，此时DOM已经完成更新，可以进行DOM操作。
beforeUnmount: 卸载实例之前调用，此时实例仍然完全可用。
unmounted: 卸载实例后调用，此时实例已经完全卸载。

生命周期类型的枚举位于packages/runtime-core/src/enums.ts目录下：

export const enum LifecycleHooks {
  BEFORE_CREATE = 'bc', // 创建之前
  CREATED = 'c', // 创建
  BEFORE_MOUNT = 'bm', // 挂载之前
  MOUNTED = 'm', // 挂载
  BEFORE_UPDATE = 'bu', // 更新之前
  UPDATED = 'u', // 更新
  BEFORE_UNMOUNT = 'bum', // 卸载之前
  UNMOUNTED = 'um', // 卸载之后
  DEACTIVATED = 'da', // 被 keep-alive 缓存的组件停用时调用。
  ACTIVATED = 'a', // 被 keep-alive 缓存的组件激活时调用。
  RENDER_TRIGGERED = 'rtg', // 依赖被收集时调用
  RENDER_TRACKED = 'rtc', // 依赖被触发时调用
  ERROR_CAPTURED = 'ec', // 错误捕获
  SERVER_PREFETCH = 'sp'
}

上面生命周期可以用一张图来表示：

选项式和组合式生命周期的区别

在Vue3中，我们可以使用选项式API和组合式API来定义组件。这两种API对应的生命周期钩子函数有一些区别。

选项式API的生命周期钩子函数定义在组件选项对象的methods中，例如：

export default {
  methods: {
    created() {
      // do something
   }
 }
}

组合式API的生命周期钩子函数定义在setup函数中，需要使用import从vue中引入，例如：

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // do something
   });
 }
}

需要注意的是，在组合式API中没有beforecate和created钩子，因为他们本身被setup这个函数替代了，直接把相关逻辑写在setup中就行了

生命周期 on Last Stand

生命周期

vue3生命周期

为什么需要生命周期

Vue3 有哪些生命周期，分别在什么时候调用？

选项式和组合式生命周期的区别