vue3的生命周期

onBeforeMount

dom未挂载，可以做一些不依赖dom的初始化操作

示例场景：
1 关键配置数据加载
需要在渲染之前能够访问到这些配置数据

import { ref, onBeforeMount } from 'vue'

onBeforeMount(async () => {
  try {
    await configStore.loadCriticalConfig()
  } catch (e) {
    error.value = new Error('配置加载失败')
  }
})

2 权限验证
在某些情况下，你可能需要在组件渲染之前验证用户权限

import { ref, onBeforeMount } from 'vue'

onBeforeMount(async () => {
  try {
    const hasAdminAccess = await authStore.checkAdminAccess()
    if (!hasAdminAccess) {
      router.push('/unauthorized')
    } else {
      isAuthorized.value = true
    }
  } catch (error) {
    console.error('权限检查失败', error)
    router.push('/error')
  }
})

onMounted

dom已经挂载，可以做一些依赖dom的操作，比如用访问dom

示例场景：
1 操作dom

import { ref, onMounted } from 'vue'
import Chart from 'chart.js'

const chartRef = ref<HTMLCanvasElement | null>(null)
const chart = ref<Chart | null>(null)

onMounted(() => {
  if (chartRef.value) {
    chart.value = new Chart(chartRef.value, {
      // 图表配置
    })
  }
})

2 发起数据请求，然后将数据渲染到dom上

onMounted(async () => {
  const res = await api.getUsers()
})

onUpdated

dom已经挂载，并且上一次响应式数据已经完成渲染，可以做一些依赖dom和数据渲染完成后的操作

示例场景：
比如消息列表加载完成后，获取容器的高度（因为数据加载完后被内容撑起的高度才是我们想要的）

import { ref, onUpdated } from 'vue'

const messageListRef = ref<HTMLDivElement | null>(null)

onUpdated(() => {
  if (messageListRef.value) {
    messageListRef.value.scrollTop = messageListRef.value.scrollHeight
  }
})

onBeforeUnmount

组件还未被卸载
还可以访问dom

示例场景：
清理仍需要访问DOM或组件实例的资源

import { ref, onMounted, onBeforeUnmount } from 'vue'
import mapboxgl from 'mapbox-gl'

const mapContainer = ref<HTMLElement | null>(null)
let map: mapboxgl.Map | null = null

onMounted(() => {
  if (mapContainer.value) {
    map = new mapboxgl.Map({
      container: mapContainer.value,
      style: 'mapbox://styles/mapbox/streets-v11'
    })
  }
})

onBeforeUnmount(() => {
  if (map) {
    map.remove() // 在DOM被移除之前清理地图实例
  }
})

onUnmounted

组件已被卸载
dom已经被移除

示例场景：
移除全局事件监听器（如果非全局的事件绑定，需要在onBeforeUnmount中操作，因为这里的非全局dom已经被移除了）

import { onMounted, onUnmounted } from 'vue'

function handleGlobalClick(event: MouseEvent) {
  console.log('Global click:', event)
}

onMounted(() => {
  document.addEventListener('click', handleGlobalClick)
})

onUnmounted(() => {
  document.removeEventListener('click', handleGlobalClick)
})