Vue 2.0 生命周期指南：从诞生到消亡

前端

2023-11-15 08:21:52

掌握 Vue 生命周期：构建健壮且可维护的组件

什么是生命周期？

生命周期 是组件从创建到销毁的整个历程。在 Vue 2.0 中，它分为几个阶段，每个阶段都有其特定的生命周期函数。理解这些函数对于编写健壮且可维护的 Vue 组件至关重要。

Vue 2.0 生命周期阶段

创建阶段：

beforeCreate： 在组件实例化之前调用，此时数据、方法和生命周期钩子尚未初始化。
created： 在组件实例化之后、挂载之前调用，此时数据、方法和生命周期钩子已经初始化，但 DOM 元素尚未创建。

挂载阶段：

beforeMount： 在挂载到 DOM 之前调用，此时组件的 DOM 元素已创建，但尚未插入到文档中。
mounted： 在挂载到 DOM 之后调用，此时组件的 DOM 元素已完全插入到文档中。

更新阶段：

beforeUpdate： 在组件收到新的 props 或 state 时调用，在重新渲染之前。
updated： 在组件重新渲染后调用，在 DOM 更新完成后。

卸载阶段：

beforeDestroy： 在销毁组件之前调用，此时组件的实例仍然存在。
destroyed： 在销毁组件之后调用，此时组件的实例已被销毁。

生命周期函数的用途

生命周期函数在 Vue 组件中扮演着至关重要的角色，具体用途如下：

初始化和数据准备： beforeCreate 和 created 函数用于初始化组件，获取数据和设置状态。
DOM 操作： beforeMount 和 mounted 函数用于执行 DOM 操作，例如添加事件监听器或动画效果。
响应式更新： beforeUpdate 和 updated 函数用于响应 props 或 state 的变化，并更新组件的 UI。
资源清理： beforeDestroy 和 destroyed 函数用于清理资源，例如移除事件监听器或关闭网络连接。

代码示例

export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    document.addEventListener('click', this.incrementCount)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.incrementCount)
  },
  methods: {
    incrementCount() {
      this.count++
    }
  }
}