Chapter 08 Vue生命周期

欢迎大家订阅【Vue2+Vue3】入门到实践专栏，开启你的 Vue 学习之旅！

文章目录

前言
一、生命周期阶段
二、生命周期钩子
三、生命周期图示

前言

Vue.js 是一个渐进式的 JavaScript 框架，广泛用于构建用户界面。理解 Vue 的生命周期对于开发高效、可维护的应用程序至关重要。本文详细讲解了 Vue 组件的生命周期及其各个阶段的钩子函数。

本篇文章参考黑马程序员

一、生命周期阶段

Vue生命周期：一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：
①创建阶段

创建阶段是 Vue 实例的初始化过程。在这个阶段，Vue 实例被创建，数据观测和事件配置开始，但尚未进行任何 DOM 操作。

②挂载阶段

挂载阶段是将 Vue 实例挂载到 DOM 上的过程。在这个阶段，模板被编译并插入到 DOM 中。

③更新阶段

更新阶段是当组件的数据发生变化时，Vue 会重新渲染组件的过程。在这个阶段，虚拟 DOM 会被重新计算并更新到实际 DOM 中。

④销毁阶段

销毁阶段是 Vue 实例被销毁的过程。在这个阶段，组件的所有资源和事件监听器都会被清理。

二、生命周期钩子

在 Vue 生命周期的过程中，会自动调用一些函数，这些函数被称为"生命周期钩子"。

生命周期钩子允许开发者在特定阶段执行自定义代码。每个阶段都有相应的生命周期钩子，以便于开发者在合适的时机进行操作。

①创建阶段

在这个阶段，Vue 实例被初始化，数据观测和事件配置开始。

beforeCreate ：

实例初始化后被调用，数据观测和事件配置尚未完成，无法访问 data 和 methods。
created ：

实例创建完成后被调用，可以访问 data 和 methods，适合进行数据获取和初始化操作，但此时 DOM 还未挂载。

【示例】

html 复制代码

<body>
  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1. 创建阶段（准备数据）
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count)
        // this.数据名 = 请求回来的数据
        // 可以开始发送初始化渲染的请求了
      },
    })
  </script>
</body>

运行结果：

②挂载阶段

在这个阶段，Vue 实例被挂载到 DOM 上。

beforeMount ：

挂载开始前被调用，此时模板已编译，但尚未插入到 DOM 中，可以在此阶段进行一些准备工作。
mounted ：

实例挂载到 DOM 上后被调用，此时可以进行 DOM 操作，如获取元素的尺寸或进行 API 请求。

【示例】

html 复制代码

<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      

      // 2. 挂载阶段（渲染模板）
      beforeMount () {
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted () {
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
        // 可以开始操作dom了
      },

      
    })
  </script>
</body>

运行结果：

③更新阶段

当数据变化时，组件会重新渲染。

beforeUpdate ：

数据更新后，虚拟 DOM 重新渲染前被调用，可以访问更新前的状态。
updated ：

组件的 DOM 更新后被调用，可以进行 DOM 操作。

【示例】

html 复制代码

<body>
  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 3. 更新阶段(修改数据 → 更新视图)
      beforeUpdate () {
        console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
      },
      updated () {
        console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
      },

    })
  </script>
</body>

运行结果：

点击"+"号按钮更改数据后：

④销毁阶段

在这个阶段，Vue 实例被销毁。

beforeDestroy ：

实例销毁之前被调用，可以进行清理操作，如移除事件监听器或定时器。
destroyed ：

实例销毁后被调用，此时所有的事件监听和子实例都被移除，可以在此阶段进行一些清理工作。

【示例】

html 复制代码

<body>
  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 4. 卸载阶段
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
        console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
      },
      destroyed () {
        console.log('destroyed，卸载后')
      }
    })
  </script>
</body>

运行结果：

在控制台输入app.$destroy()并回车后：

Vue.$destroy() 是 Vue 实例的方法，用于手动销毁 Vue 实例。调用此方法后，Vue 会执行一系列清理操作，以确保组件及其相关资源被正确释放。

三、生命周期图示

以下是 Vue 组件生命周期的图示，展示了各个钩子的调用顺序：
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed