1. 怎么卸载一个组件？#

在现代前端框架中，我们极少“手动”调用方法去销毁一个组件，而是通过数据驱动的方式让框架替我们卸载。常见的方法有：

• 使用条件渲染（最常见）： 在 Vue 中使用 v-if="false"，或者在 React 中使用 {show && <Component />}。当条件为假时，该组件就会被完全卸载。

  1
  <!-- isShow 变为 false 时，MyComponent 会被卸载 -->
  2
  <MyComponent v-if="isShow" />
  

• 路由切换： 当从页面 A 跳转到页面 B 时，页面 A 对应的路由组件以及它包含的所有子组件默认都会被卸载。

• 切换动态组件： 使用 <component :is="currentComponent"> 时，失去活跃状态的组件会被卸载（除非用 <keep-alive> 包裹）。

• 改变组件的 key 属性： 如果给一个组件绑定了 key，当 key 的值发生变化时，Vue/React 会认为这是一个全新的节点，从而卸载旧组件并挂载新组件。

• 手动调用销毁（仅限 Vue 2，Vue 3 已废弃）： 可以调用 this.$destroy()。但不推荐这样做，最好通过数据流（v-if）来控制。

2. 一个组件怎么样才算（完全）卸载？#

当以下过程发生时，组件就算是进入了“卸载中”和“已卸载”状态：

1. 触发卸载生命周期钩子：
   • Vue 2: 触发 beforeDestroy 和 destroyed。
   • Vue 3: 触发 beforeUnmount 和 unmounted。
   • React: 触发 componentWillUnmount 或 useEffect 的返回函数（清除函数）。
2. 从 DOM 树中移除： 该组件之前渲染的所有 HTML 节点（真实 DOM）从页面文档中彻底删除。
3. 解绑框架内置的监听器和关联： 框架会自动解除该组件上的数据响应式依赖（比如 Vue 的 Watcher）、自动移除模板中绑定的事件监听器（如 @click）。
4. 释放内存准备被垃圾回收（GC）： 组件实例对象本身失去引用，等待 JavaScript 引擎的垃圾自动回收（前提是你没有在别的全局变量里引用它）。

⚠️ 极其重要的注意事项（容易引发内存泄漏）： 虽然框架会自动卸载组件的内部依赖，但跨出组件范围的副作用不会自动清理。组件卸载时，你必须在销毁钩子（如 beforeUnmount）中手动清理以下内容，否则不算是一次“干净的卸载”：

• 手动用 window.addEventListener 或 document.addEventListener 绑定的全局事件。
• 使用的 setInterval 或 setTimeout 定时器。
• 手动初始化的第三方库实例（比如 ECharts 实例对象的 chart.dispose()）。实例销毁后，才算完全释放资源。