// ❌ 危险的写法：只开不关
onMounted(() => {
  setInterval(() => { tick() }, 1000)
})

// ✅ 正确写法：开了就要关
let timer = null
onMounted(() => {
  timer = setInterval(() => { tick() }, 1000)
})
onUnmounted(() => {
  clearInterval(timer)     // 不清就是内存泄漏 + 后台空转
})

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

const inputRef = ref(null)          // ① 起一个同名的 ref 变量，初始值 null

onMounted(() => {
  inputRef.value.focus()            // ③ 挂载后才能用（此时才真正是 DOM）
})
</script>

<template>
  <input ref="inputRef" />          <!-- ② 在标签上写 ref="变量名" -->
</template>

show.value = true
inputRef.value.focus()      // ❌ 此时输入框还没被创建，inputRef.value 是 null

import { nextTick } from 'vue'

show.value = true
await nextTick()            // 等界面更新完成
inputRef.value.focus()      // ✅ 现在能拿到了

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

const now = ref('')
let timer = null

onMounted(() => {
  console.log('组件挂载了')
  timer = setInterval(() => { now.value = new Date().toLocaleTimeString() }, 1000)
})

onUnmounted(() => {
  console.log('组件卸载了，清掉定时器')
  clearInterval(timer)
})
</script>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick, defineComponent, h } from 'vue'
import {
  ElCard, ElButton, ElInput, ElTag, ElProgress, ElAlert, ElSwitch,
  ElDescriptions, ElDescriptionsItem, ElMessage
} from 'element-plus'
import 'element-plus/dist/index.css'

/* ============ 内联子组件：Monitor（演示完整的生命周期） ============ */
const Monitor = defineComponent({
  name: 'Monitor',
  emits: ['log'],
  setup(props, { emit }) {
    const now = ref('')
    const cpu = ref(20)
    const mem = ref(45)
    const ticks = ref(0)
    let timer = null

    function tick() {
      ticks.value++
      now.value = new Date().toLocaleTimeString()
      // 造一些看起来在波动的数据
      cpu.value = Math.min(98, Math.max(5, cpu.value + Math.round((Math.random() - 0.5) * 24)))
      mem.value = Math.min(95, Math.max(10, mem.value + Math.round((Math.random() - 0.5) * 10)))
    }

    onMounted(() => {
      emit('log', 'Monitor 挂载完成 → 启动定时器')
      tick()
      timer = setInterval(tick, 1000)
    })

    // ⚠️ 关键：组件被销毁时必须清掉定时器，否则它会在后台一直跑
    onUnmounted(() => {
      emit('log', 'Monitor 已卸载 → 清除定时器（Console 不再打印）')
      clearInterval(timer)
    })

    function statusType(v) {
      if (v >= 85) return 'danger'
      if (v >= 60) return 'warning'
      return 'success'
    }

    return () => h('div', null, [
      h(ElDescriptions, { column: 2, border: true }, {
        default: () => [
          h(ElDescriptionsItem, { label: '当前时间' }, () => now.value || '—'),
          h(ElDescriptionsItem, { label: '已刷新次数' }, () => String(ticks.value)),
          h(ElDescriptionsItem, { label: 'CPU 使用率' }, () => [
            h(ElTag, { type: statusType(cpu.value), size: 'small' }, () => cpu.value + '%')
          ]),
          h(ElDescriptionsItem, { label: '内存使用率' }, () => [
            h(ElTag, { type: statusType(mem.value), size: 'small' }, () => mem.value + '%')
          ])
        ]
      }),
      h('div', { class: 'bars' }, [
        h(ElProgress, { percentage: cpu.value, strokeWidth: 14,
          color: cpu.value >= 85 ? '#f56c6c' : cpu.value >= 60 ? '#e6a23c' : '#67c23a' }),
        h(ElProgress, { percentage: mem.value, strokeWidth: 14 })
      ])
    ])
  }
})

/* ============ 父组件 ============ */
const showMonitor = ref(true)
const logs = ref([])
const inputRef = ref(null)
const draft = ref('')
const showSearchBox = ref(false)
const searchRef = ref(null)

const lastLog = computed(() => logs.value[logs.value.length - 1] || '（还没有日志）')

function addLog(text) {
  const t = new Date().toLocaleTimeString()
  logs.value.push(`[${t}] ${text}`)
  console.log(text)
  if (logs.value.length > 12) logs.value.shift()
}

// ① 页面加载完成后自动聚焦输入框
onMounted(() => {
  addLog('父组件挂载完成 → 自动聚焦输入框')
  inputRef.value && inputRef.value.focus()
})

// ② 手动聚焦
function focusInput() {
  inputRef.value && inputRef.value.focus()
  ElMessage.success('已聚焦到输入框')
}

// ③ nextTick 演示：先显示搜索框，再聚焦（不 await 就会失败）
async function openSearch() {
  showSearchBox.value = true
  // 试一试把下面这行注释掉，会出现 Cannot read properties of null
  await nextTick()
  searchRef.value && searchRef.value.focus()
  addLog('搜索框已显示并聚焦（nextTick 之后才拿到 DOM）')
}

onUnmounted(() => {
  console.log('父组件卸载')
})
</script>

<template>
  <div class="page">
    <h1 class="title">生命周期钩子与模板引用</h1>

    <el-card class="block">
      <template #header>
        <div class="hd">
          <span>服务器监控（内联子组件 Monitor）</span>
          <el-switch v-model="showMonitor" active-text="挂载 / 卸载" />
        </div>
      </template>

      <!-- v-if 为 false 时组件被卸载，onUnmounted 被触发 -->
      <Monitor v-if="showMonitor" @log="addLog" />
      <p v-else class="gone">组件已卸载。观察 Console：不再有任何时间打印。</p>
    </el-card>

    <el-card class="block">
      <template #header>模板引用：自动聚焦</template>
      <el-input ref="inputRef" v-model="draft" placeholder="页面加载后光标应该已经在这里" clearable />
      <div class="ops">
        <el-button type="primary" @click="focusInput">重新聚焦</el-button>
        <el-button @click="openSearch">显示搜索框并聚焦（演示 nextTick）</el-button>
      </div>
      <el-input
        v-if="showSearchBox"
        ref="searchRef"
        placeholder="这个框是刚被 v-if 创建出来的"
        clearable
      />
    </el-card>

    <el-card class="block">
      <template #header>生命周期日志（最新一条：{{ lastLog }}）</template>
      <pre class="log">{{ logs.join('\n') || '暂无' }}</pre>
      <el-alert
        title="做实验：把右上角开关关掉，Console 应该停止打印时间与 CPU 数据——这证明 onUnmounted 里的 clearInterval 生效了。"
        type="info" :closable="false" show-icon
      />
    </el-card>
  </div>
</template>

<style>
html, body, #app {
  margin: 0; padding: 0; max-width: none; width: auto; height: auto;
  display: block; place-items: initial; text-align: left; background: #f5f7fa;
}
</style>

<style scoped>
.page { max-width: 900px; margin: 28px auto; padding: 0 16px; }
.title { font-size: 22px; color: #303133; margin: 0 0 18px; }
.block { margin-bottom: 16px; }
.hd { display: flex; justify-content: space-between; align-items: center; }
.bars { margin-top: 12px; }
.gone { color: #909399; margin: 4px 0; }
.ops { margin: 12px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.log {
  background: #1f2430; color: #a9dc76; padding: 12px; border-radius: 6px;
  font-size: 12px; line-height: 1.7; margin: 0 0 12px; max-height: 220px; overflow: auto;
}
</style>

async function openSearch() {
  showSearchBox.value = true
  await nextTick()
  searchRef.value && searchRef.value.focus()
}

<script setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from 'vue'
const n = ref(0)

onBeforeMount(() => console.log('1 onBeforeMount'))
onMounted(() => console.log('2 onMounted'))
onBeforeUpdate(() => console.log('3 onBeforeUpdate'))
onUpdated(() => console.log('4 onUpdated'))
onBeforeUnmount(() => console.log('5 onBeforeUnmount'))
onUnmounted(() => console.log('6 onUnmounted'))
</script>
<template>
  <p>{{ n }}</p>
  <button @click="n++">改数据</button>
</template>

const inputRef = ref(null)
console.log('setup 阶段的 inputRef：', inputRef.value)   // 预期：null

<!-- ① 普通元素 -->
<input ref="a" />

<!-- ② v-for 里：拿到的是数组 -->
<div v-for="i in 3" :key="i" ref="listRefs">{{ i }}</div>

<!-- ③ v-if 为 false 时：ref 的值是 null -->
<div v-if="show" ref="b">内容</div>