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中不再支持beforeDestroy和destroyed钩子函数，取而代之的是beforeUnmount和unmounted。此外，Vue 3中的生命周期钩子函数采用了更加直观的命名方式，使得开发者更容易理解和使用。

image.png

注意！！！：Vue3的生命周期钩子函数，和setup（）函数是平级的，只有销毁阶段有所不同；Vue3的组合式生命周期，是写在setup（）函数里面的

Vue3的组合式生命周期

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

在Vue 3中，组合式API是一种新的API风格，可以让我们更好地组织和重用组件逻辑。与Vue 2的选项式API不同，组合式API没有像created、mounted、beforeUpdate等生命周期钩子函数，而是采用了一种新的组合式生命周期的方式。 组合式生命周期是通过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>
avatar
文章
阅读
粉丝