Vue3 生命周期详解有哪些要点？

提问者：Terry2025.04.18浏览：57

vue3 问答

在Vue3的开发中，生命周期是非常重要的概念，它就像是一个程序运行的时间轴，不同的阶段对应着不同的操作，让开发者可以在合适的时机执行相应的代码逻辑,下面通过一系列问答来详细解析Vue3的生命周期。

什么是Vue3的生命周期？

Vue3的生命周期指的是Vue组件从创建、挂载、更新到销毁的整个过程，在这个过程中，Vue会按照特定的顺序触发一系列的生命周期钩子函数，开发者可以在这些钩子函数中编写自定义代码，以满足不同阶段的业务需求，在组件创建阶段可以进行数据的初始化,在挂载阶段可以操作DOM元素等。

Vue3生命周期与Vue2生命周期有什么区别？

在Vue2中，生命周期钩子函数的命名方式比较直观，像created、mounted等，而Vue3中，除了保留部分与Vue2类似的钩子函数外，还引入了Composition API风格的生命周期钩子，比如在Vue2中我们在created钩子中进行数据初始化，在Vue3的Composition API中可以使用setup()函数，它在组件创建阶段就会被调用，承担了类似created的功能，Vue3的生命周期钩子函数在写法上更加灵活，可以在setup()函数内部通过onXxx的形式来使用，如onMounted，Vue3移除了一些不常用的钩子，如beforeDestroy和destroyed，取而代之的是beforeUnmount和unmounted，这使得生命周期的命名更加语义化,更清晰地表达了组件从挂载到卸载的过程。

Vue3有哪些主要的生命周期钩子函数？

创建阶段
- setup()：这是Vue3 Composition API中非常重要的入口函数，在组件创建之前就会被调用，它接收props和context作为参数，可以在其中进行数据的响应式定义、方法的定义等操作。
```
import { ref } from 'vue';
export default {
setup(props, context) {
  const count = ref(0);
  const increment = () => {
      count.value++;
  };
  return {
      count,
      increment
  };
}
};
```
- onBeforeMount：在组件挂载到DOM之前被调用，组件的模板已经编译完成，但尚未挂载到实际的DOM节点上，可以在此处进行一些准备工作，比如添加事件监听器等,但不能直接操作DOM元素。
- onMounted：组件挂载到DOM后调用，组件已经在页面中渲染完成，可以对DOM元素进行操作，例如获取DOM元素的尺寸、初始化第三方插件等。
更新阶段
- onBeforeUpdate：在组件数据更新之前调用，当组件的响应式数据发生变化，且即将重新渲染组件时，会触发这个钩子，可以在此处进行一些数据更新前的准备工作,如记录旧数据。
- onUpdated：在组件数据更新且重新渲染完成后调用，组件已经根据新的数据重新渲染到DOM上,可以在此处执行一些依赖于最新DOM状态的操作。
卸载阶段
- onBeforeUnmount：在组件卸载之前调用，可以在此处进行一些清理工作，如移除事件监听器、取消定时器等,以避免内存泄漏。
- onUnmounted：组件卸载后调用，组件已经从DOM中移除,相关的实例也即将被销毁。

如何在Vue3中使用生命周期钩子函数？

Options API方式：如果仍然习惯使用Options API，在Vue3中依然可以像Vue2那样使用生命周期钩子函数。

export default {
 data() {
     return {
         message: 'Hello Vue3'
     };
 },
 created() {
     console.log('组件已创建');
 },
 mounted() {
     console.log('组件已挂载到DOM');
 },
 beforeUpdate() {
     console.log('数据即将更新');
 },
 updated() {
     console.log('数据已更新且组件重新渲染');
 },
 beforeUnmount() {
     console.log('组件即将卸载');
 },
 unmounted() {
     console.log('组件已卸载');
 }
};

Composition API方式：在setup()函数中使用onXxx形式的生命周期钩子。

import { onMounted, onUpdated, onBeforeUnmount } from 'vue';
export default {
 setup() {
     onMounted(() => {
         console.log('组件已挂载到DOM，使用Composition API');
     });
     onUpdated(() => {
         console.log('数据已更新且组件重新渲染，使用Composition API');
     });
     onBeforeUnmount(() => {
         console.log('组件即将卸载，使用Composition API');
     });
 }
};

在setup()函数中使用生命周期钩子有什么优势？

逻辑组织更清晰：在setup()函数中使用onXxx形式的生命周期钩子，将相关的逻辑都集中在setup()函数内部，使得代码结构更加紧凑，对于一个组件的创建、挂载和卸载相关的操作，都可以在setup()函数中直接定义，而不需要像Options API那样分散在不同的钩子函数中，这样对于大型组件,代码的可读性和维护性都有很大提升。
更好的复用性：在Composition API中，可以将生命周期相关的逻辑封装成可复用的函数，有多个组件都需要在挂载后执行相同的初始化操作，就可以将onMounted相关的逻辑封装到一个函数中，然后在不同的组件setup()函数中调用这个函数,提高了代码的复用性。
与响应式系统结合更紧密：setup()函数本身就是Vue3响应式系统的入口，在其中使用生命周期钩子，可以更方便地操作响应式数据，在onUpdated钩子中，可以直接访问和修改在setup()函数中定义的响应式数据，而不需要通过this来访问,使得代码更加简洁明了。

生命周期钩子函数的执行顺序是怎样的？

组件创建过程：首先执行setup()函数，进行组件的初始化工作，包括响应式数据的定义等，然后依次触发onBeforeMount和onMounted，onBeforeMount在组件挂载到DOM之前触发，onMounted在组件成功挂载到DOM之后触发。
组件更新过程：当组件的响应式数据发生变化时，会先触发onBeforeUpdate，此时数据即将更新但尚未重新渲染，接着组件重新渲染，渲染完成后触发onUpdated。
组件卸载过程：当组件需要从DOM中移除时，先触发onBeforeUnmount，可以在此进行清理工作，然后组件卸载，触发onUnmounted。

当一个组件首次加载时,控制台会依次输出：

setup函数执行
onBeforeMount钩子执行
onMounted钩子执行

当组件的数据发生变化导致更新时,控制台会输出：

onBeforeUpdate钩子执行
onUpdated钩子执行

当组件被卸载时,控制台会输出：

onBeforeUnmount钩子执行
onUnmounted钩子执行

在父子组件中，生命周期钩子函数的执行顺序是怎样的？

加载渲染过程：父组件先执行setup()函数，然后子组件依次执行setup()、onBeforeMount，接着父组件执行onBeforeMount，子组件执行onMounted，最后父组件执行onMounted，可以理解为父组件先开始初始化，然后子组件进行初始化和挂载,最后父组件完成挂载。
更新过程：当父组件的数据变化引起更新时，父组件先触发onBeforeUpdate，然后子组件触发onBeforeUpdate，接着子组件更新完成触发onUpdated，最后父组件更新完成触发onUpdated。
卸载过程：父组件先触发onBeforeUnmount，然后子组件触发onBeforeUnmount，子组件卸载后触发onUnmounted，最后父组件卸载触发onUnmounted。

通过了解父子组件生命周期钩子函数的执行顺序，可以更好地控制组件之间的数据传递和协同工作,确保在合适的时机进行相应的操作。

如何在生命周期钩子中进行错误处理？

在Vue3的生命周期钩子中，可以使用try...catch语句来进行错误处理，在onMounted钩子中，如果需要执行一些可能会出错的DOM操作,可以这样处理：

import { onMounted } from 'vue';
export default {
    setup() {
        onMounted(() => {
            try {
                const element = document.getElementById('non-existent-element');
                if (element) {
                    // 执行相关操作
                }
            } catch (error) {
                console.error('在onMounted钩子中发生错误:', error);
            }
        });
    }
};

这样，当获取DOM元素失败时，会捕获错误并在控制台输出错误信息，避免因为错误导致组件功能异常或页面崩溃，同样，在其他生命周期钩子中，如onUpdated、onBeforeUnmount等，也可以采用类似的方式进行错误处理,确保组件在各个阶段的稳定性。

深入理解Vue3的生命周期及其各个钩子函数的使用方法和执行顺序，对于开发高质量、可维护的Vue应用至关重要，无论是在简单的小型项目还是复杂的大型应用中，合理运用生命周期钩子函数都能帮助我们更好地实现业务逻辑，提升用户体验。

赏您的支持是我们创作的动力！