Vue的生命周期详情

Vue 组件从创建到销毁的整个过程被称为生命周期，每个阶段都有对应的钩子函数，开发者可以在这些钩子中执行特定代码。

创建阶段详情

创建阶段
beforeCreate	实例刚被创建，数据观测和事件配置之前；data、methods 等都不可用
created	实例创建完成，数据观测和事件配置已完成；可以访问 data、methods，但 DOM 还未生成 ($el 不可用)；常用于发起异步请求、初始化数据

挂载阶段

挂载阶段
beforeMount	模板编译/渲染函数调用之前；DOM已存在但内容还未被渲染
mounted	实例挂载到 DOM 后调用；可以访问渲染后的 DOM；DOM 操作、集成第三方库、发起依赖 DOM 的请求

更新阶段

更新阶段
beforeUpdate	数据变化后，DOM 更新前；可以在 DOM 更新前访问现有 DOM；获取更新前的 DOM 状态
updated	数据变化导致 DOM 重新渲染后；可以操作更新后的 DOM；执行依赖新 DOM 的操作（注意避免无限循环）

销毁阶段

销毁阶段
beforeUnmount	实例销毁前调用；实例仍然完全可用；清除定时器、取消事件监听、取消未完成的请求
unmounted	实例销毁后调用；所有绑定和监听被移除，子实例也被销毁；最后的清理工作

代码说明

<template>
  <div>
    <h1>Vue 生命周期示例</h1>
    <p>当前计数: {{ count }}</p>
    <button @click="count++">增加计数</button>
    <button @click="destroyComponent">销毁组件</button>
  </div>
</template>
<script>
export default {
  name: 'LifecycleDemo',
  data() {
    return {
      count: 0,
      timer: null
    }
  },
  // 1. 创建阶段
  beforeCreate() {
    console.log('1. beforeCreate - 实例刚创建，data和methods还未初始化')
    console.log('data:', this.$data) // undefined
    console.log('count:', this.count) // undefined
  },
  created() {
    console.log('2. created - 实例创建完成，可以访问data和methods')
    console.log('count:', this.count) // 0
    console.log('$el:', this.$el) // undefined，DOM还未生成

    // 常用场景：发起异步请求
    this.timer = setInterval(() => {
      console.log('定时器运行中...')
    }, 1000)
  },
  // 2. 挂载阶段
  beforeMount() {
    console.log('3. beforeMount - 模板编译完成，但还未挂载到DOM')
    console.log('$el:', this.$el) // 存在但内容未渲染
  },
  mounted() {
    console.log('4. mounted - 实例已挂载到DOM')
    console.log('$el:', this.$el) // 已渲染的DOM

    // 常用场景：DOM操作或集成第三方库
    const el = this.$el.querySelector('h1')
    console.log('h1内容:', el.textContent)
  },
  // 3. 更新阶段
  beforeUpdate() {
    console.log('5. beforeUpdate - 数据更新前，DOM还未重新渲染')
    console.log('count将变为:', this.count)
    const p = this.$el.querySelector('p')
    console.log('DOM中的计数:', p.textContent) // 旧值
  },
  updated() {
    console.log('6. updated - 数据更新后，DOM已重新渲染')
    const p = this.$el.querySelector('p')
    console.log('DOM中的计数:', p.textContent) // 新值
  },
  // 4. 销毁阶段
  beforeDestroy() {
    console.log('7. beforeDestroy - 实例销毁前')
    console.log('count:', this.count) // 仍然可以访问

    // 重要：清除定时器、事件监听等
    clearInterval(this.timer)
    console.log('已清除定时器')
  },
  destroyed() {
    console.log('8. destroyed - 实例销毁后')
    // 所有指令解绑，事件监听器移除，子实例也被销毁
  },
  methods: {
    destroyComponent() {
      this.$destroy()
      console.log('组件已手动销毁')
    }
  }
}
</script>