挂载与卸载

onMounted 会在组件最终 DOM 与 template ref 可用后触发，适合初始化 Canvas 图表、编辑器、WebGL renderer、overlay、Observer 等接管 DOM 的外部工具。

const canvas = useTemplateRef<HTMLCanvasElement>("canvas");

onMounted(() => {
  const chart = createChart(canvas.value!);
  return () => chart.destroy();
});

从 onMounted 返回清理函数，可以把资源创建和所有权放在一起。清理发生在 onBeforeUnmount 之后、ElfUI 释放组件 DOM 和作用域之前；异步挂载在组件已卸载后才完成时也能安全清理。

当清理不属于某一次具体的挂载操作时，仍可使用 onUnmounted：

onUnmounted(() => {
  analytics.record("component-unmounted");
});

不要在模块或 setup 阶段初始化接管 DOM 的工具：此时元素可能还不存在，异步组件也还没有提交最终 DOM。异步取消与重连模式见集成外部工具。

before hooks

onBeforeMount(() => {
  // 首次渲染提交前
});

onBeforeUnmount(() => {
  // DOM 和组件作用域释放前
});

能使用 useEventListener() 和 Observer 组合式函数时优先使用，它们会自动把清理绑定到所属组件 scope。同一轮事件循环内的 DOM move 不会创建第二个组件实例；真正断开后再重新连接会创建新的 mounted 实例。

挂载与卸载 ​

before hooks ​

挂载与卸载

before hooks