Vue入门之生命周期

文章目录

[一、Vue 生命周期概述](#一、Vue 生命周期概述)
二、生命周期的四个阶段
- [1. 创建阶段](#1. 创建阶段)
- [2. 挂载阶段](#2. 挂载阶段)
- [3. 更新阶段](#3. 更新阶段)
- [4. 销毁阶段](#4. 销毁阶段)
三、代码案例
四、总结

在 Vue 开发中，理解生命周期是非常重要的。Vue 的生命周期可以帮助我们在不同的阶段执行特定的逻辑，从而更好地控制组件的行为和状态。本文将详细介绍 Vue 的生命周期，包括四个阶段、生命周期钩子以及代码案例。

一、Vue 生命周期概述

Vue 实例在创建和运行过程中会经历一系列的阶段，每个阶段都有相应的钩子函数可以让我们在特定的时刻执行自定义的逻辑。Vue 的生命周期主要分为四个阶段：创建阶段、挂载阶段、更新阶段和销毁阶段。

二、生命周期的四个阶段

1. 创建阶段

在这个阶段，Vue 实例被创建，但是还没有被挂载到 DOM 上。这个阶段的主要任务是初始化数据、设置 watcher 和事件监听等。

生命周期钩子：

beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。
created：在实例创建完成后被立即调用。此时，实例已完成以下的配置：数据观测、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

2. 挂载阶段

在这个阶段，Vue 实例被挂载到 DOM 上。这个阶段的主要任务是将模板渲染成真实的 DOM，并在 DOM 中显示出来。

生命周期钩子：

beforeMount：在挂载开始之前被调用。此时，模板已经编译完成，但是还没有被渲染到 DOM 上。
mounted：在挂载完成后被立即调用。此时，模板已经被渲染到 DOM 上，可以通过this.$el访问到真实的 DOM 元素。

3. 更新阶段

当数据发生变化时，Vue 会自动更新 DOM，这个过程就是更新阶段。

生命周期钩子：

beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新，可以执行依赖于 DOM 的操作。但是在大多数情况下，应该避免在此期间更改状态，因为这可能会导致无限循环的更新。

4. 销毁阶段

当组件被销毁时，会进入销毁阶段。这个阶段的主要任务是清理定时器、取消事件监听等资源。

生命周期钩子：

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

三、代码案例

下面是一个简单的 Vue 组件示例，展示了生命周期钩子的使用：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Lifecycle Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
      },
      beforeUpdate() {
        console.log('beforeUpdate');
      },
      updated() {
        console.log('updated');
      },
      beforeDestroy() {
        console.log('beforeDestroy');
      },
      destroyed() {
        console.log('destroyed');
      },
      methods: {
        changeMessage() {
          this.message = 'New Message';
        }
      }
    });
  </script>
</body>

</html>

在这个例子中，我们在每个生命周期钩子中都输出了一条日志，以便观察生命周期的各个阶段。当页面加载时，会依次输出beforeCreate、created、beforeMount、mounted。当点击按钮更改数据时，会输出beforeUpdate和updated。如果在某个时候调用app.$destroy()方法销毁实例，会输出beforeDestroy和destroyed。

四、总结

Vue 的生命周期提供了一种强大的方式来控制组件的行为和状态。通过理解和使用生命周期钩子，我们可以在不同的阶段执行特定的逻辑，从而更好地管理组件的生命周期。在实际开发中，我们可以根据具体的需求选择合适的生命周期钩子来实现各种功能，如数据初始化、DOM 操作、资源清理等。