vue的生命周期解析：4个阶段和8个钩子函数

Vue的生命周期是Vue实例从创建到销毁的整个过程，可以分为四个主要阶段，每个阶段都有对应的钩子函数，让我们可以在特定时刻执行自定义逻辑。

四个主要阶段

1. 创建阶段 (Creation) - 初始化数据和事件

2. 挂载阶段 (Mounting) - 将模板编译并挂载到DOM

3. 更新阶段 (Updating) - 数据变化时重新渲染

4. 销毁阶段 (Destruction) - 清理工作，移除事件监听器等

8个主要钩子函数

下面是完整的生命周期钩子函数及其执行时机：

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  // 1. 创建阶段
  beforeCreate() {
    // 实例初始化之后，数据观测和事件配置之前
    console.log('beforeCreate: 数据和事件尚未初始化')
  },
  created() {
    // 实例创建完成，数据观测已完成，但DOM尚未挂载
    console.log('created: 数据已初始化，可以访问data和methods')
    console.log(this.message) // 可以访问数据
  },
  // 2. 挂载阶段
  beforeMount() {
    // 模板编译完成，但尚未挂载到DOM
    console.log('beforeMount: 模板已编译，但未挂载到DOM')
  },
  mounted() {
    // 实例已挂载到DOM，可以访问DOM元素
    console.log('mounted: 实例已挂载到DOM')
    console.log(this.$el) // 可以访问DOM元素
  },
  // 3. 更新阶段
  beforeUpdate() {
    // 数据更新时调用，DOM尚未重新渲染
    console.log('beforeUpdate: 数据已更新，DOM尚未重新渲染')
  },
  updated() {
    // 数据更新导致DOM重新渲染后调用
    console.log('updated: DOM已重新渲染')
  },
  // 4. 销毁阶段
  beforeDestroy() {
    // 实例销毁之前调用，实例仍然完全可用
    console.log('beforeDestroy: 实例即将销毁，但仍可访问')
  },
  destroyed() {
    // 实例销毁后调用，所有事件监听器和子实例已被移除
    console.log('destroyed: 实例已完全销毁')
  }
}

生命周期钩子函数详解

1. 创建阶段 (Creation)

• beforeCreate: 在实例初始化之后，数据观测和事件配置之前调用。此时无法访问到data、computed、methods等。

• created: 实例创建完成，数据观测和事件已初始化。可以访问data、computed、methods等，但DOM尚未挂载。

2. 挂载阶段 (Mounting)

• beforeMount: 模板编译完成，但尚未挂载到DOM。

• mounted: 实例已挂载到DOM，可以访问DOM元素。常用于需要操作DOM的初始化。

3. 更新阶段 (Updating)

• beforeUpdate: 数据更新时调用，DOM尚未重新渲染。

• updated: 数据更新导致DOM重新渲染后调用。注意避免在此钩子中修改状态，可能导致无限更新循环。

4. 销毁阶段 (Destruction)

• beforeDestroy: 实例销毁之前调用，实例仍然完全可用。常用于清理工作，如清除定时器、取消事件监听等。

• destroyed: 实例销毁后调用，所有事件监听器和子实例已被移除。

这个可视化演示展示了Vue生命周期的完整过程，你可以通过点击各个钩子函数查看详细信息，并通过操作按钮观察不同阶段钩子函数的触发情况。