Vue 生命周期详解

刘志辉

于 2024-08-21 20:54:08 发布

阅读量434

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_58462329/article/details/141402726

版权

一、引言

Vue.js 是一个渐进式的 JavaScript 框架，广泛应用于前端开发。在 Vue 中，每个组件都有其生命周期，即从创建到销毁的过程。了解组件的生命周期有助于我们更好地管理组件的状态和行为。本篇博客将详细介绍 Vue 组件的生命周期。

二、Vue 生命周期概述

Vue 组件的生命周期可以分为以下几个阶段：

创建阶段（Creation）
挂载阶段（Mounting）
更新阶段（Updating）
销毁阶段（Destruction）

每个阶段都有一系列的钩子函数，我们可以在这些钩子函数中执行特定的逻辑。

三、Vue 生命周期钩子函数

1. 创建阶段

在创建阶段，Vue 实例会依次调用以下钩子函数：

beforeCreate：实例刚被创建，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

2. 挂载阶段

在挂载阶段，Vue 实例会依次调用以下钩子函数：

beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 也在文档内。

3. 更新阶段

在更新阶段，Vue 实例会依次调用以下钩子函数：

beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

4. 销毁阶段

在销毁阶段，Vue 实例会依次调用以下钩子函数：

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

四、生命周期钩子函数的使用示例

以下是一个简单的 Vue 3 示例，展示了如何在不同生命周期钩子函数中执行逻辑：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
import { ref, onMounted, onUpdated, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue!');

    onMounted(() => {
      console.log('组件已挂载');
    });

    onUpdated(() => {
      console.log('组件已更新');
    });

    onBeforeUnmount(() => {
      console.log('组件即将销毁');
    });

    function updateMessage() {
      message.value = 'Hello Vue 3!';
    }

    return {
      message,
      updateMessage,
    };
  },
};
</script>