Vue 生命周期

Vue 组件的生命周期分为创建、挂载、更新和销毁四个阶段,每个阶段包含特定的钩子函数(生命周期钩子)。这些钩子允许开发者在不同阶段执行自定义逻辑。

🌟 完整生命周期流程图

复制代码
创建阶段 → 挂载阶段 → 更新阶段 → 销毁阶段
  │          │          │          │
beforeCreate  beforeMount beforeUpdate beforeUnmount
  │          │          │          │
  created     mounted     updated     unmounted

生命周期钩子详解

1. 创建阶段 (Initialization)

  • beforeCreate

    • 触发时机:实例初始化后,数据观测/事件配置前

    • 访问能力 :无法访问 datamethodscomputed

    • 使用场景

      • 初始化非响应式变量
      • 注入插件(如全局事件总线)
      javascript 复制代码
      beforeCreate() {
        this.$bus = new Vue() // 初始化事件总线
      }
  • created

    • 触发时机:实例创建完成,数据观测/属性计算完成

    • 访问能力 :可访问 datamethodscomputed

    • DOM 状态 :未挂载,$el 不可用

    • 使用场景

      • 异步数据请求(API 调用)
      • 初始化组件状态
      javascript 复制代码
      created() {
        axios.get('/api/data').then(res => {
          this.items = res.data
        })
      }

2. 挂载阶段 (Mounting)

  • beforeMount

    • 触发时机:模板编译完成,首次渲染前

    • DOM 状态:虚拟 DOM 已创建,但未替换真实 DOM

    • 使用场景

      • 最后时刻的数据修改(不会触发重新渲染)
      javascript 复制代码
      beforeMount() {
        this.loading = true // 显示加载状态
      }
  • mounted

    • 触发时机:实例挂载到 DOM 后

    • DOM 状态:可访问真实 DOM 元素

    • 使用场景

      • DOM 操作(初始化第三方库)
      • 事件监听器注册
      javascript 复制代码
      mounted() {
        this.chart = echarts.init(this.$refs.chart)
        window.addEventListener('resize', this.handleResize)
      }

3. 更新阶段 (Updating)

  • beforeUpdate

    • 触发时机:数据变化后,虚拟 DOM 重新渲染前

    • DOM 状态:当前 DOM 仍为旧状态

    • 使用场景

      • 获取更新前的 DOM 状态(如滚动位置)
      javascript 复制代码
      beforeUpdate() {
        this.oldScrollTop = this.$refs.list.scrollTop
      }
  • updated

    • 触发时机:虚拟 DOM 重新渲染并应用后

    • DOM 状态:DOM 已更新到最新状态

    • 使用场景

      • 依赖新 DOM 的操作(如调整图表尺寸)
      • 注意:避免在此修改状态,可能导致无限循环
      javascript 复制代码
      updated() {
        this.chart.resize() // 图表适配新尺寸
      }

4. 销毁阶段 (Destruction)

  • beforeUnmount (Vue 2: beforeDestroy)

    • 触发时机:实例销毁前,仍完全可用

    • 使用场景

      • 清理定时器
      • 取消事件监听
      • 清除全局状态引用
      javascript 复制代码
      beforeUnmount() {
        clearInterval(this.timer)
        window.removeEventListener('resize', this.handleResize)
      }
  • unmounted (Vue 2: destroyed)

    • 触发时机:实例销毁后

    • 组件状态:所有指令解绑,事件监听器移除,子实例销毁

    • 使用场景

      • 执行最终清理日志
      • 通知外部系统组件已卸载
      javascript 复制代码
      unmounted() {
        console.log('Component destroyed')
        this.$emit('component-unmounted')
      }

Vue 3 Composition API 中的生命周期

setup() 中使用对应的生命周期函数:

javascript 复制代码
import { 
  onBeforeMount, 
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  setup() {
    onBeforeMount(() => console.log('Before Mount'))
    onMounted(() => console.log('Mounted'))
    // 其他钩子同理...
  }
}

特殊场景钩子

  • errorCaptured :捕获子孙组件错误

    javascript 复制代码
    errorCaptured(err, vm, info) {
      console.error(`Error in ${info}:`, err)
      return false // 阻止错误继续向上传播
    }
  • activated/deactivated<keep-alive> 缓存组件状态管理


生命周期使用最佳实践

  1. 数据请求 :优先使用 created(比 mounted 早 1 个周期)
  2. DOM 操作 :必须在 mounted 后进行
  3. 状态清理
    • 定时器:beforeUnmount
    • 全局事件:beforeUnmount
  4. 避免在 updated 中修改状态:可能引起无限更新循环
  5. 性能敏感操作 :在 beforeUpdate 中获取旧 DOM 状态

生命周期时序图

复制代码
父组件 created
  ↓
子组件 created → beforeMount → mounted
  ↓
父组件 mounted
  ↓
数据更新 → beforeUpdate → updated
  ↓
组件销毁 → beforeUnmount → unmounted

理解生命周期钩子的执行时机和适用场景,能帮助开发者更精准地控制组件行为,避免常见错误(如内存泄漏),并优化应用性能。

相关推荐
千鼎数字孪生-可视化10 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月10 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码33 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder36 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte41 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang1 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子2 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试