HTML模板技术不提供组件生命周期销毁能力，template标签仅为声明式占位符，克隆后需手动清理定时器、事件监听、WebGL资源等，否则将导致内存泄漏。
HTML模板技术本身不提供组件生命周期销毁能力——template 标签只是声明式占位符，浏览器不会自动绑定、挂载或卸载它里面的内容，更不会触发任何清理逻辑。
template 标签不会自动参与 DOM 生命周期
template 里的内容默认不渲染、不执行脚本、不建立事件监听，但它也**不自带销毁语义**。你用 document.importNode(template.content, true) 克隆出节点后，这些节点就和手写 div 没区别：没有自动卸载，没有自动解绑，没有自动释放 Canvas/WebGL/Observer。
- 常见错误：把逻辑全塞进
template，以为“没插入就安全”，结果克隆后忘清理，切走再切回时事件重复绑定 - 真正起作用的是你后续怎么用它：是直接
appendChild()？还是放进keep-alive？还是池化复用？这些行为决定是否需要手动销毁 -
template.content是 DocumentFragment，克隆后原内容不变，但克隆体一旦插入 DOM，就得按普通节点对待——该清定时器清，该removeEventListener就得配对
Vue 的 <template> 和原生 <template> 完全不是一回事
Vue 单文件组件里的 <template> 是编译时语法糖，最终生成 render 函数；而原生 HTML 的 <template> 是运行时 DOM 节点，两者生命周期机制毫无关联。
- Vue 组件销毁时会走
unmounted钩子，但这个钩子只对 Vue 实例生效，对template标签本身无影响 - 如果你在 Vue 模板里写了
<template><canvas></template>，Canvas 实例仍需在onUnmounted里调canvas.getContext('2d').canvas = null或销毁上下文 - 原生
template被 Vue 当作静态内容处理，不会触发connectedCallback，也不会进入自定义元素生命周期流
想靠 template 实现“安全销毁”，必须配合显式资源管理
唯一可行路径是：用 template 做结构缓存 + 手动控制节点复用 + 在切换前执行清理。否则，哪怕节点被移出 DOM，背后的 WebGL 纹理、requestAnimationFrame ID、MutationObserver 实例仍在后台吃内存。
立即学习“前端免费学习笔记（深入）”；
- 每次从
template克隆前，先检查目标容器是否已有旧节点：有则先调其dispose()方法（需提前约定接口） - 克隆后立即绑定清理函数到组件级状态（如 Vue 的
onBeforeUnmount或 React 的useEffect cleanup），而不是依赖template自身 - 避免在
template内联写onclick="doSomething()"—— 这类内联事件无法通过removeEventListener移除，只能靠重置innerHTML，但那样会丢失所有已绑定的监听器和上下文 - Canvas/WebGL 场景下，必须在清理阶段显式调用
gl.deleteTexture()、map.remove()、chart.destroy()，不能只删 DOM 节点
真正决定是否销毁的，从来不是模板写在哪，而是你有没有在节点脱离活跃 DOM 的那一刻，把它的 JS 运行时资源一并掐断——template 只是起点，不是保险栓。
