浅谈vue的生命周期

对于“浅谈Vue的生命周期”的完整攻略，本文将按照以下目录结构展开：

什么是生命周期
生命周期的分类
Vue实例的生命周期
生命周期的钩子函数
Vue组件的生命周期
生命周期的示例说明
总结

接下来，我们将逐个讲解每个部分的内容。

什么是生命周期

生命周期，指的是Vue实例从创建到销毁过程中经过的一系列过程，可以理解为Vue实例的状态机。生命周期从实例被创建、初始化数据、编译模板、挂载DOM、更新渲染、卸载销毁等一系列过程，包括了多个阶段，每个阶段会触发不同的钩子函数。

生命周期的分类

Vue的生命周期可以分为两类：Vue实例的生命周期和Vue组件的生命周期。

Vue实例的生命周期指的是Vue实例从创建到销毁的整个过程。
Vue组件的生命周期指的是Vue组件从创建到销毁的整个过程，其中也包含了Vue实例的生命周期。

Vue实例的生命周期

Vue实例的生命周期可以分为8个阶段，分别是：

beforeCreate：实例刚在内存中创建时触发，此时数据和方法均未初始化，无法访问data中的数据或methods中的方法。
created：实例创建完成时触发，此时data中的数据和methods中的方法已经初始化完成，但是此时仍无法访问DOM元素。
beforeMount：实例挂载到页面前触发，此时template模板尚未渲染成HTML结构。
mounted：实例挂载到页面后触发，此时template模板已经渲染成HTML结构，并且DOM元素已经挂载到页面上，可以进行DOM操作。
beforeUpdate：实例更新前触发，此时数据发生变化，但页面尚未重新渲染。
updated：实例更新后触发，此时页面已经重新渲染，数据和DOM元素同步。
beforeDestroy：实例销毁前触发，此时实例仍然能访问data中的数据和methods中的方法。
destroyed：实例销毁后触发，此时实例已经无法访问data中的数据和methods中的方法以及DOM元素。

生命周期的钩子函数

在Vue实例的生命周期中，每个阶段都有对应的钩子函数，我们可以通过这些钩子函数来执行一些操作。下面是每个阶段对应的钩子函数：

beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用，此时尚未初始化data和methods属性。
created：在实例创建完成后被立即调用，此时可以访问data和methods属性，但实例尚未挂载到DOM上。
beforeMount：在挂载开始之前被调用，此时实例的render函数被调用，返回虚拟DOM对象（vnode），但尚未渲染成真实的DOM结构。
mounted：在挂载完成后被调用，此时真实DOM已经创建完成，可以在这里进行DOM操作。
beforeUpdate：在数据更新之前被调用，在这个钩子函数中，可以进行状态的更新。
updated：在DOM更新之后被调用，在这个钩子函数中，可以访问更新后的DOM。
beforeDestroy：在实例销毁之前被调用，可以在这里销毁定时器、移除事件监听等占用资源的操作。
destroyed：在实例销毁之后被调用，可以在这里进行一些清理操作，如取消异步请求等等。

Vue组件的生命周期

Vue组件是一种特殊的Vue实例，也有自己的生命周期。Vue组件的生命周期是由Vue实例的生命周期组成的。在组件生命周期中，还有两个新的钩子函数，分别是：

beforeDestroy：在组件销毁之前被调用。
destroyed：在组件销毁之后被调用。

在组件的start up period和teardown period部分，使用一下钩子函数:

钩子函数	描述
`beforeCreate`	实例中的挂载、渲染、事件监听等都未完成
`created`	Vue 实例已经创建，但是 DOM 元素还没被挂载
`beforeMount`	挂载点已经准备好，但是数据未显示在视图上
`mounted`	模板渲染成HTML并且视图已经挂载，数据已显示在视图上
`beforeUpdate`	实例更新之前被调用（组件更新之前）
`updated`	实例更新完成时被调用（组件更新完成时）
`beforeDestroy`	实例销毁之前被调用（组件销毁之前）
`destroyed`	实例销毁之后被调用（组件销毁之后）

生命周期的示例说明

下面我们来看两个生命周期的示例：

示例1：使用Vue实例的生命周期

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  beforeCreate() {
    console.log('beforeCreate', this.message) // 此时无法访问data中的数据
  },
  created() {
    console.log('created', this.message) // 数据已初始化完成，但是DOM还未挂载
  },
  beforeMount() {
    console.log('beforeMount', this.$el) // HTML还未渲染成真实的DOM结构
  },
  mounted() {
    console.log('mounted', this.$el) // 组件已经被渲染到页面上
  },
  beforeUpdate() {
    console.log('beforeUpdate', this.message) // 数据即将更新
  },
  updated() {
    console.log('updated', this.message) // 数据已经更新完成
  },
  beforeDestroy() {
    console.log('beforeDestroy') // 实例即将被销毁
  },
  destroyed() {
    console.log('destroyed') // 实例已经被销毁
  }
}
</script>

示例2：使用Vue组件的生命周期

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  beforeCreate() {
    console.log('beforeCreate', this.message) // 此时无法访问data中的数据
  },
  created() {
    console.log('created', this.message) // 数据已初始化完成，但是DOM还未挂载
  },
  beforeMount() {
    console.log('beforeMount', this.$el) // HTML还未渲染成真实的DOM结构
  },
  mounted() {
    console.log('mounted', this.$el) // 组件已经被渲染到页面上
  },
  beforeUpdate() {
    console.log('beforeUpdate', this.message) // 数据即将更新
  },
  updated() {
    console.log('updated', this.message) // 数据已经更新完成
  },
  beforeDestroy() {
    console.log('beforeDestroy') // 组件即将被销毁
  },
  destroyed() {
    console.log('destroyed') // 组件已经被销毁
  }
}
</script>

以上两个示例，分别展示了Vue实例和Vue组件的生命周期和生命周期的钩子函数。

总结

本文对Vue的生命周期进行了介绍，包括了生命周期的分类、Vue实例的生命周期、生命周期的钩子函数以及通过示例讲解了生命周期的使用方法。Vue生命周期是Vue应用开发中非常重要的一部分，深入理解生命周期可以提高我们Vue应用的开发效率和质量。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈vue的生命周期 - Python技术站