Vue.js: 组件生命周期

<script setup>
const { ref, onMounted } = Vue

const user = ref(null)

onMounted(async () => {
  // 1. 加载初始数据
  const res = await fetch('/api/user')
  user.value = await res.json()
  
  // 2. DOM 操作（操作真实 DOM）
  document.title = `${user.value.name} - Dashboard`
  
  // 3. 注册全局事件监听
  const handleResize = () => { console.log('Window resized') }
window.addEventListener('resize', handleResize)
  
  // 4. 设置定时器
  const timer = setInterval(() => {
    console.log('Tick')
  }, 1000)
  
  // ❌ 注意：onUnmounted 中要清理 timer 和 listener
})
</script>

<script setup>
const { onMounted, onUnmounted } = Vue

let timer = null

onMounted(() => {
  timer = setInterval(() => console.log('Tick'), 1000)
  const handleResize = () => { console.log('Window resized') }
window.addEventListener('resize', handleResize)
})

// ✅ 清理：避免内存泄漏
onUnmounted(() => {
  clearInterval(timer)
  window.removeEventListener('resize', handleResize)
})
</script>

<!-- App.vue 使用 -->
<ErrorBoundary>
  <UserProfile :user-id="123" />  <!-- 如果出错，会被 ErrorBoundary 捕获 -->
</ErrorBoundary>

两个按钮「count++ (0)」和「卸载」，下方浅蓝区块显示「Props count: 0」，再下面是灰色小字「查看 console 输出」。
点 count++ → 按钮变「count++ (1)」、区块变「Props count: 1」，控制台依次打印「3. onBeforeUpdate」「4. onUpdated」。
点「卸载」→ 按钮文字变「挂载」、区块消失，控制台打印「5. onBeforeUnmount」「6. onUnmounted」。

初始页面上只有一块空白区域（子组件还没出错时的内容）。
约 100ms 后子组件抛错，内容被替换成浅红提示条「⚠️ Error: Cannot set properties of null (setting 'foo')」，控制台同时打印「Caught: ...」和「Info: ...」。
因为回调 return false，错误不再继续向上冒泡。

1. Parent setup()
2. Parent setup
3. Parent setup()
4. Parent onBeforeMount
5. Child setup()
6. Child setup
7. Child setup()
8. Child onBeforeMount
9. Child onMounted
10. Parent onMounted

1. Parent onBeforeUnmount
2. Child onBeforeUnmount
3. Child onUnmounted
4. Parent onUnmounted

页面显示灰边容器里的「Parent 父组件」，下面套一个黄色块「Child 子组件」，顶部灰色小字提示「查看 console：先 Child 后 Parent」。
控制台依次打印「3. Child onMounted」→「4. Parent onMounted」，即父组件的 onMounted 晚于子组件。

<!-- 子组件：被 keep-alive 缓存 -->
<script setup>
const { onActivated, onDeactivated } = Vue

// 组件被激活时（从缓存中恢复）
onActivated(() => {
  console.log('Component activated')
  // 重新加载数据、恢复滚动位置等
})

// 组件被停用时（切走但保留在缓存）
onDeactivated(() => {
  console.log('Component deactivated')
  // 保存状态、暂停定时器等
})
</script>

顶部三个 Tab 按钮：Home 为绿色（当前选中）、Profile 和 Settings 为灰色。
下方绿色面板：「Home」标题、按钮「内部计数: 0」、灰色提示「切换到其他 Tab 再切回，计数保留」。
点计数 → 1；切到 Profile（蓝底）再切回 Home，计数仍为 1，控制台在切换时打印 deactivated / activated 日志。

顶部按钮「卸载组件」，下方用户卡片先显示「Loading...」。
约 500ms 后变为标题「Alice 1」和「alice1@example.com」，控制台打印「✅ Mounted: 数据已加载」，之后每 5 秒打印一条「⏰ Timer tick」。
点击按钮 → 卡片消失、按钮文字变「挂载组件」，控制台打印「🧹 Unmounted: 已清理定时器」；再点一次会重新走一遍加载流程。