Vue 3 中的生命周期

145 阅读4分钟

要知道Vue3中的生命周期如何使用,先要明白Vue2中的生命周期如何使用

Vue2生命周期

image.png

Vue 2中的生命周期钩子函数分为8个阶段,分别是:

  1. beforeCreate: 在实例被创建之前执行,此时数据观测和初始化都未开始。
  2. created: 在实例创建完成后执行,此时已完成数据观测并且所有的属性和方法都已经建立完成。
  3. beforeMount: 在挂载之前被调用,此时模板编译已完成,但尚未将编译得到的内容替换到HTML文档中。
  4. mounted: 在挂载之后被调用,此时实例已完成挂载并且可以访问到DOM元素。
  5. beforeUpdate: 在更新之前被调用,此时数据已更新但尚未重新渲染DOM。
  6. updated: 在更新之后被调用,此时数据已更新且DOM已重新渲染。
  7. beforeDestroy: 在实例销毁之前调用,此时实例仍然完全可用。
  8. destroyed: 在实例销毁之后调用,此时实例所有的属性和方法都已经被删除,DOM元素也已经被销毁。

需要注意的是,Vue 2中的生命周期钩子函数只是在组件生命周期的不同阶段被调用,开发者可以在这些钩子函数中执行自己的逻辑。同时,Vue 2中的生命周期钩子函数并不是必须的,开发者可以选择只使用部分钩子函数或者不使用钩子函数。但是,钩子函数的执行顺序是固定的,不能随意更改。

Vue3 生命周期

image.png

Vue 3中的生命周期钩子函数相对于Vue 2有了一些变化,以下是Vue 3中的生命周期钩子函数:

  1. beforeCreate: 在实例被创建之前执行,此时数据观测和初始化都未开始。
  2. created: 在实例创建完成后执行,此时已完成数据观测并且所有的属性和方法都已经建立完成。
  3. beforeMount: 在挂载之前被调用,此时模板编译已完成,但尚未将编译得到的内容替换到HTML文档中。
  4. mounted: 在挂载之后被调用,此时实例已完成挂载并且可以访问到DOM元素。
  5. beforeUpdate: 在更新之前被调用,此时数据已更新但尚未重新渲染DOM。
  6. updated: 在更新之后被调用,此时数据已更新且DOM已重新渲染。
  7. beforeUnmount: 在卸载之前被调用,此时实例仍然完全可用。
  8. unmounted: 在卸载之后被调用,此时实例已被完全卸载,所有的事件监听器和子组件实例都已经被删除。

需要注意的是,Vue 3中不再支持beforeDestroydestroyed钩子函数,取而代之的是beforeUnmountunmounted。此外,Vue 3中的生命周期钩子函数采用了更加直观的命名方式,使得开发者更容易理解和使用。

image.png

注意!!!:Vue3的生命周期钩子函数,和setup()函数是平级的,只有销毁阶段有所不同;Vue3的组合式生命周期,是写在setup()函数里面的

Vue3的组合式生命周期

注意!!:Vue3的组合式生命周期每一个阶段都要比Vue3的生命周期先执行

在Vue 3中,组合式API是一种新的API风格,可以让我们更好地组织和重用组件逻辑。与Vue 2的选项式API不同,组合式API没有像createdmountedbeforeUpdate等生命周期钩子函数,而是采用了一种新的组合式生命周期的方式。 组合式生命周期是通过onXXX函数来实现的,其中XXX代表不同的阶段,以下是Vue 3中的组合式生命周期:

image.png

  1. onBeforeMount: 在挂载之前被调用,此时模板编译已完成,但尚未将编译得到的内容替换到HTML文档中。
  2. onMounted: 在挂载之后被调用,此时实例已完成挂载并且可以访问到DOM元素。
  3. onBeforeUpdate: 在更新之前被调用,此时数据已更新但尚未重新渲染DOM。
  4. onUpdated: 在更新之后被调用,此时数据已更新且DOM已重新渲染。
  5. onBeforeUnmount: 在卸载之前被调用,此时实例仍然完全可用。
  6. onUnmounted: 在卸载之后被调用,此时实例已被完全卸载,所有的事件监听器和子组件实例都已经被删除。

在组合式API中,我们可以按照自己的需要组织和重用组件逻辑,并且可以根据不同的生命周期阶段来执行相应的逻辑。与选项式API相比,组合式API可以让我们更好地理解和控制组件的生命周期,提高了代码的可维护性和可读性。

Vue3的组合式生命周期钩子函数,写在setup()函数里面

image.png

Vue3中的组合式API,可以多次使用,执行顺序从上往下

<script setup>
    onMounted(() => {
        console.log('第一个执行的 onMounted 钩子函数')
    })
    onMounted(() => {
        console.log('第二个执行的 onMounted 钩子函数')
    })
</script>