html模板技术本身不提供组件生命周期自动清理能力，所有清理逻辑必须由开发者显式编写：template只是惰性容器，克隆后的节点需手动绑定/解绑事件、销毁canvas/webgl资源、终止worker，匿名函数监听器无法移除，第三方库实例须调.dispose()，复用推荐map池化而非频繁克隆。
HTML模板技术本身不提供组件生命周期自动清理能力，所有清理逻辑必须由开发者显式编写——template标签只是惰性容器，DocumentFragment不绑定事件也不触发钩子，它不会帮你解绑监听器、销毁Canvas上下文或终止Worker。
template标签只是静态片段，不是组件运行时载体
template内容被克隆插入DOM后，节点才真正“活”起来；但模板本身从不参与任何生命周期事件，也不会触发connectedCallback或disconnectedCallback。你看到的“组件切换”，实际是JS在操作克隆后的节点树，模板只是源头快照。
- 常见错误现象：
<template id="card"><div><button>X</button></div></template>里写了onclick="removeSelf()"，但复用时按钮点击多次触发——因为每次克隆都新建一个独立节点，旧节点残留的事件没被清理 - 使用场景：适合做纯结构复用（如列表项模板），但不能替代组件封装逻辑
- 关键限制：克隆出来的节点没有记忆，不继承模板的JS作用域，也不共享事件监听器引用
动态插入后必须手动绑定+手动解绑
从template克隆出的节点，和手写document.createElement()一样，属于“裸节点”。框架（Vue/React）能自动清理，是因为它们在vnode层做了拦截；原生方案则完全依赖你配对管理。
- 匿名函数监听器永远无法移除：
clone.querySelector('button').addEventListener('click', () => { ... })→ 后续调用removeEventListener无效 - 正确做法：定义具名函数并绑定到节点实例上，例如
const handler = function() { this.remove(); };，再用btn.addEventListener('click', handler)，清理时btn.removeEventListener('click', handler) - 第三方库（如ECharts）初始化后返回实例，必须保存引用并在节点移出DOM前调用
.dispose()，否则Canvas/WebGL资源持续驻留
keep-alive类复用必须靠Map池化，不能依赖template重渲染
template不解决复用时的状态同步问题。比如一个带输入框的模板，克隆两次插入不同位置，改其中一个值，另一个不会变——因为它们是独立节点，没有数据响应链。
- 高频滚动/切换场景下，反复
cloneNode(true)+appendChild()会触发大量回流，且每次都要重绑事件、重设Canvas上下文 - 推荐做法：用
Map缓存已克隆节点，键为dataset.id，滚出视口时只设display: none，复用时直接更新textContent、src、dataset等字段 - 必须防护：初始化时就固定DOM结构（如子元素class名不可动态增删），否则复用时
querySelector('.price')可能取错位置
最常被忽略的是：你以为template能“隔离”状态，其实它连基本的引用隔离都做不到——克隆出来的节点仍共享全局变量、闭包捕获的父作用域，甚至console.log里的对象引用都会拖住内存。真要验证是否清理干净，得用Chrome DevTools拍堆快照，而不是看页面有没有消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
