Vue.js 生命周期详解-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 是一款流行的 JavaScript 前端框架，其生命周期是 Vue.js 组件中最重要的概念之一。生命周期是指 Vue.js 组件在创建、更新、销毁时所经过的一系列事件，可以让我们更好地了解它的运行过程，从而更好地控制和管理组件。本文将详细介绍 Vue.js 生命周期，包括生命周期的阶段、每个阶段所触发的事件和示例代码。

生命周期阶段

Vue.js 组件的生命周期分为 8 个阶段，按顺序分别为：

beforeCreate: 组件实例创建前，此时组件的 data 和 methods 等选项都未初始化。
created: 组件实例创建完成，此时组件的 data 和 methods 等选项已经初始化，但是模板仍未编译。
beforeMount: 模板编译完成，但是未将其挂载到页面中。
mounted: 模板已挂载到页面中，此时组件已经初始化完成，可以访问到 DOM 元素。
beforeUpdate: 组件状态更新前，此时组件的数据或者 props 改变了，但是 DOM 上的元素还未更新。
updated: 组件状态更新完成，此时 DOM 上的元素已经被更新。
beforeDestroy: 组件销毁前，此时组件实例仍然完全可用。
destroyed: 组件销毁完成，此时组件实例已经被完全卸载。

生命周期事件

每个生命周期阶段都会触发一个或多个生命周期事件，用于帮助我们在不同的阶段中做出相应的操作。下面是每个阶段所触发的事件。

beforeCreate

beforeCreate：在实例初始化之后，此时还没有触发 created 事件。可以在这个阶段中做一些初始化工作，如在这个阶段中不能够访问到 data 选项。

created

created：在实例已经创建完成，已经触发了 beforeCreate 事件并初始化了 data 选项。在这个阶段中可以访问到 data、methods 等选项，并可以修改 data 数据，但不会触发组件更新。

beforeMount

beforeMount：在模板已经编译完成，但是还未将其挂载到页面上。可以在这个阶段中获取到模板渲染后的 HTML，并对渲染后的 HTML 进行处理。

mounted

mounted：在模板已经被挂载到页面上。一般来说，在这个阶段可以进行页面上元素的初始化工作，如绑定事件、设置定时器等。此时可以访问到已经挂载到页面上的 DOM 元素。

beforeUpdate

beforeUpdate：在组件状态更新前，此时组件的数据或者 props 改变了，但是 DOM 上的元素还未更新。可以在这个阶段中进行状态更新前的操作，如记录需要更新的状态。

updated

updated：在组件状态更新完成，此时 DOM 上的元素已经被更新。一般来说，在这个阶段中可以进行重新渲染组件等操作。

beforeDestroy

beforeDestroy：在组件销毁前，此时组件实例仍然完全可用。可以在这个阶段中进行一些清理工作，如取消定时器、解绑事件等。此时还可以获取到组件当前的状态。

destroyed

destroyed：在组件销毁完成，此时组件实例已经被完全卸载。如有需要，可以在这个阶段中进行最后的清理工作，如清理定时器等。

生命周期示例

下面是一个使用 Vue.js 实现的生命周期示例。在这个示例中，我们将会在每个阶段中分别打印出当前所处的阶段以及组件的 msg 数据。

// www.javascriptcn.com code example
<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  name: 'Lifecycle',
  data() {
    return {
      msg: 'Hello World!'
    }
  },
  beforeCreate() {
    console.log('beforeCreate:', this.msg)
  },
  created() {
    console.log('created:', this.msg)
  },
  beforeMount() {
    console.log('beforeMount:', this.msg)
  },
  mounted() {
    console.log('mounted:', this.msg)
  },
  beforeUpdate() {
    console.log('beforeUpdate:', this.msg)
  },
  updated() {
    console.log('updated:', this.msg)
  },
  beforeDestroy() {
    console.log('beforeDestroy:', this.msg)
  },
  destroyed() {
    console.log('destroyed:', this.msg)
  }
}
</script>

在上面的代码中，我们使用了 Vue.js 的生命周期钩子函数，在每个生命周期阶段中分别打印出当前所处的阶段以及组件的 msg 数据。我们可以将上面的示例代码作为参考来了解 Vue.js 生命周期的使用方法。

结语

Vue.js 生命周期是 Vue.js 组件中非常重要的概念之一，通过了解和使用 Vue.js 生命周期，我们可以更好地了解组件的运行和数据状态，从而更好地控制和管理组件。本文详细介绍了 Vue.js 生命周期的阶段、事件以及示例代码，希望可以对读者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d79070a941bf7134d889ba

Vue.js 生命周期详解