组件生命周期

每个 Vue 组件实例在创建时都要经历一系列步骤，Vue 暴露了生命周期钩子。

生命周期阶段

JavaScript

创建 → 挂载 → 更新 → 卸载

主要钩子函数

钩子	时机	常见用途
`onCreated` / `created`	实例创建后	初始化数据、发起请求
`onMounted` / `mounted`	DOM 挂载后	操作 DOM、第三方库初始化
`onUpdated` / `updated`	数据变化 DOM 更新后	响应数据变化的操作
`onUnmounted` / `unmounted`	组件销毁前	清理定时器、解绑事件

Composition API 用法

JavaScript

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    onUnmounted(() => {
      console.log('组件即将卸载')
    })
  }
}

Options API 用法

JavaScript

export default {
  mounted() {
    console.log('组件已挂载')
  },
  unmounted() {
    console.log('组件即将卸载')
  }
}

示例：数据请求

text

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const data = ref(null)
    
    onMounted(async () => {
      const res = await fetch('/api/data')
      data.value = await res.json()
    })
    
    return { data }
  }
}

要点总结

生命周期钩子在特定时机执行逻辑
常用钩子：created、mounted、updated、unmounted
Composition API 使用 onXXX 函数
unmounted 钩子用于清理资源