生命周期

什么是生命周期？

Vue 组件从创建到销毁的过程称为生命周期。在这个过程中，Vue 会在不同的阶段调用一些函数，这些函数称为生命周期钩子。

Vue3 生命周期钩子

Vue3 提供了以下生命周期钩子：

选项式 API 生命周期

export default {
  // 创建阶段
  beforeCreate() {
    console.log('组件实例刚被创建，数据观测和事件配置尚未完成')
  },
  created() {
    console.log('组件实例已创建完成，数据观测和事件配置已完成')
  },
  
  // 挂载阶段
  beforeMount() {
    console.log('模板编译完成，但尚未挂载到 DOM')
  },
  mounted() {
    console.log('组件已挂载到 DOM，可以访问和操作 DOM 元素')
  },
  
  // 更新阶段
  beforeUpdate() {
    console.log('数据更新前，DOM 尚未重新渲染')
  },
  updated() {
    console.log('数据更新后，DOM 已重新渲染')
  },
  
  // 卸载阶段
  beforeUnmount() {
    console.log('组件卸载前，仍可访问组件实例和 DOM')
  },
  unmounted() {
    console.log('组件已卸载，所有事件监听器已移除，子组件已卸载')
  },
  
  // 错误处理
  errorCaptured(err, vm, info) {
    console.log('捕获到子组件的错误', err, vm, info)
  }
}

组合式 API 生命周期

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured } from 'vue'

export default {
  setup() {
    // 创建阶段（在 setup 中直接执行）
    console.log('组件实例刚被创建')
    
    // 挂载阶段
    onBeforeMount(() => {
      console.log('模板编译完成，但尚未挂载到 DOM')
    })
    
    onMounted(() => {
      console.log('组件已挂载到 DOM，可以访问和操作 DOM 元素')
    })
    
    // 更新阶段
    onBeforeUpdate(() => {
      console.log('数据更新前，DOM 尚未重新渲染')
    })
    
    onUpdated(() => {
      console.log('数据更新后，DOM 已重新渲染')
    })
    
    // 卸载阶段
    onBeforeUnmount(() => {
      console.log('组件卸载前，仍可访问组件实例和 DOM')
    })
    
    onUnmounted(() => {
      console.log('组件已卸载，所有事件监听器已移除，子组件已卸载')
    })
    
    // 错误处理
    onErrorCaptured((err, vm, info) => {
      console.log('捕获到子组件的错误', err, vm, info)
    })
  }
}

生命周期流程图

  1. 创建阶段
    • beforeCreate: 组件实例刚被创建
    • created: 组件实例已创建完成
  2. 挂载阶段
    • beforeMount: 模板编译完成，尚未挂载
    • mounted: 组件已挂载到 DOM
  3. 更新阶段
    • beforeUpdate: 数据更新，DOM 尚未重新渲染
    • updated: 数据更新，DOM 已重新渲染
  4. 卸载阶段
    • beforeUnmount: 组件卸载前
    • unmounted: 组件已卸载

生命周期钩子的使用场景

  • mounted: 初始化 DOM 操作、发送网络请求、添加事件监听器
  • updated: 响应数据变化后的 DOM 操作
  • beforeUnmount: 清理事件监听器、取消网络请求、清理定时器
  • errorCaptured: 捕获和处理子组件的错误

Vue3 与 Vue2 生命周期的区别

Vue2 Vue3 说明
beforeCreate setup() Vue3 中 setup() 替代了 beforeCreate 和 created
created setup() Vue3 中 setup() 替代了 beforeCreate 和 created
beforeMount onBeforeMount 功能相同
mounted onMounted 功能相同
beforeUpdate onBeforeUpdate 功能相同
updated onUpdated 功能相同
beforeDestroy onBeforeUnmount 名称更准确
destroyed onUnmounted 名称更准确
← 返回核心概念