生命周期深度解析：从创建到销毁的完整流程

创建阶段:
  beforeCreate  →  setup()  →  created
挂载阶段:
  beforeMount   →  onBeforeMount  →  mounted
更新阶段:
  beforeUpdate  →  onBeforeUpdate  →  updated
卸载阶段:
  beforeUnmount →  onBeforeUnmount  →  unmounted

// ❌ 不能访问 data/computed/methods
// ❌ 不能访问 DOM
// ✅ 可以初始化非响应式数据
export default {
  beforeCreate() {
    console.log(this.message) // undefined
  }
}

// ✅ 可以访问 data/computed/methods
// ❌ 不能访问 DOM(未挂载)
// ✅ 适合:数据初始化、API 请求
export default {
  data() {
    return { list: [] }
  },
  created() {
    this.fetchList()
  }
}

// ✅ render 函数首次被调用
// ❌ 真实 DOM 还未创建
// 很少使用

// ✅ 真实 DOM 已挂载
// ✅ 可以操作 DOM、初始化第三方库
onMounted(() => {
  const chart = new ECharts(document.getElementById('chart'))
})

// ✅ 数据已变化,DOM 未更新
// ✅ 可以在此访问更新前的 DOM 状态

// ✅ DOM 已更新
// ❌ 不要在此修改数据(会导致死循环)

// ✅ 清理定时器、事件监听、第三方库
onBeforeUnmount(() => {
  clearInterval(timer)
  chart.dispose()
})

父 beforeCreate
→ 父 created
→ 父 beforeMount
  → 子 beforeCreate
  → 子 created
  → 子 beforeMount
  → 子 mounted
→ 父 mounted

父 beforeUpdate
→ 子 beforeUpdate
→ 子 updated
→ 父 updated

父 beforeUnmount
→ 子 beforeUnmount
→ 子 unmounted
→ 父 unmounted

export default {
  setup() {
    console.log('1. setup 开始(相当于 beforeCreate)')

    const count = ref(0)
    console.log('2. 数据初始化(相当于 created)')

    onBeforeMount(() => {
      console.log('3. 挂载前')
    })

    onMounted(() => {
      console.log('4. 挂载完成')
    })

    return { count }
  }
}

<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'

const count = ref(0)

// setup() 顶层代码 = beforeCreate + created
console.log('组件初始化')

onBeforeMount(() => {
  console.log('挂载前')
})

onMounted(() => {
  console.log('挂载完成,可以操作 DOM')
})

onBeforeUpdate(() => {
  console.log('更新前')
})

onUpdated(() => {
  console.log('更新完成')
})

onBeforeUnmount(() => {
  console.log('卸载前,清理资源')
})

onUnmounted(() => {
  console.log('卸载完成')
})
</script>

// ❌ 错误
created() {
  this.$refs.myDiv.innerHTML = 'Hello' // $refs 为 undefined
}

// ✅ 正确
mounted() {
  this.$refs.myDiv.innerHTML = 'Hello'
}

// ❌ 死循环!
updated() {
  this.count++ // 触发更新 → updated → 再次触发更新 → ...
}

// ✅ 使用 watch
watch(
  () => someData,
  () => {
    this.count++
  }
)

// ❌ 可能出问题
async created() {
  this.user = await fetchUser()
  // 如果组件已卸载,这里的赋值会报错
}

// ✅ 正确处理
setup() {
  const user = ref(null)
  const abortController = new AbortController()

  onMounted(async () => {
    user.value = await fetchUser({ signal: abortController.signal })
  })

  onBeforeUnmount(() => {
    abortController.abort() // 取消请求
  })

  return { user }
}

<template>
  <Child ref="childRef" />
</template>

<script setup>
const childRef = ref(null)

onMounted(() => {
  // ✅ 可以访问,因为子组件先 mounted
  childRef.value.someMethod()
})
</script>

<keep-alive>
  <Component :is="currentView" />
</keep-alive>

export default {
  activated() {
    console.log('组件被激活(从缓存恢复)')
    // 适合:刷新数据、恢复滚动位置
  },
  deactivated() {
    console.log('组件被停用(进入缓存)')
    // 适合:暂停定时器、保存状态
  }
}

// ✅ SSR 会执行
beforeCreate()
created()

// ❌ SSR 不执行
beforeMount()
mounted()
// 以及所有更新/卸载钩子

// ❌ SSR 会报错
created() {
  const width = window.innerWidth
}

// ✅ 正确
mounted() {
  const width = window.innerWidth
}

父 beforeCreate → 父 created → 父 beforeMount
→ 子 beforeCreate → 子 created → 子 beforeMount → 子 mounted
→ 父 mounted

setup() {
  // 这里的代码就相当于 beforeCreate + created
  const data = ref(0)
}

import { getCurrentInstance } from 'vue'

setup() {
  const instance = getCurrentInstance()
  console.log(instance.proxy) // 相当于 this
}