场景

写了个 <Chart/> 子组件，里面套了 ECharts，画完图之后把实例存进了 let myChart = echarts.init(...)。
父组件里切换时间范围时，图死活不更新，因为 myChart 只在 onMounted 里初始化了一次。
不想把逻辑搬出来，就想让子组件“从头再来”。

口诀

“改 key 等于重启”

代码（最简可运行）

Parent.vue

<template>
  <!-- 1. 给子组件一个 key -->
  <Chart :key="chartKey" :range="range"/>
  <button @click="reset">刷新图表</button>
</template>

<script setup>
import { ref } from 'vue'
import Chart from './Chart.vue'

const range = ref('today')
const chartKey = ref(0)          // 2. 声明响应式 key

function reset() {
  range.value = 'week'           // 数据也顺便换
  chartKey.value++               // 3. 自增 → 组件销毁+重建
}
</script>

Chart.vue（子组件不用改任何代码）

<template>
  <div ref="box" style="width: 100%;height: 300px;"></div>
</template>

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

const props = defineProps(['range'])
const box = ref()

onMounted(() => {
  const myChart = echarts.init(box.value)
  myChart.setOption({
    title: { text: 'Range: ' + props.range },
    series: [{ type: 'line', data: [5, 20, 36, 10, 10, 20] }]
  })
})
</script>

要点

1. key 变化 ⇒ Vue 把旧组件干掉，全新 setup() 跑一次。

2. 不用 forceUpdate，不用 v-if 来回切换。

3. 如果子组件内部还有异步数据，记得在 onMounted 里重新拉取即可。

总结

“记不住生命周期？给子组件加把钥匙：key++ 就完事。”