标签本身不提供生命周期管理能力，它只是浏览器原生的惰性 dom 片段容器，内容不解析、不执行脚本、不触发事件，也不响应属性变更或挂载/卸载，所有生命周期逻辑必须通过 js 主动封装并显式控制。
<template></template> 标签本身不提供生命周期管理能力 —— 它只是浏览器原生的“惰性 DOM 片段容器”，内容不会被解析、不执行脚本、不触发事件，更不会响应属性变更或挂载/卸载。所谓“深度管理”，必须靠 JS 主动封装 + 显式控制。
为什么 <template></template> 不能直接响应 mounted/unmounted
浏览器对 <template></template> 的处理是静态的：它只缓存 innerHTML 字符串或 DocumentFragment，不关联任何实例、不持有状态、不绑定事件监听器。你无法在其中写 connectedCallback，也不能监听 attribute 变化 —— 因为它根本不是自定义元素，也不是 Vue/React 组件。
- 常见错误现象：
<template id="card"><div>{{title}}</div></template>中的@click和{{title}}完全无效，纯字符串 - 使用场景：适合做“模板快照”，比如预编译结构、批量生成卡片、配合
document.importNode()复用节点 - 性能影响：每次
content.cloneNode(true)都新建节点，若未手动清理事件或定时器，极易内存泄漏
如何用 <template></template> + 类封装模拟生命周期
核心思路是把 <template></template> 当作 HTML 字符串源，用 Class 封装创建、挂载、更新、销毁逻辑，并在关键节点插入人工钩子。
- 初始化时从
<template></template>克隆节点：const frag = document.getElementById('card').content.cloneNode(true) - 挂载前调用
beforeMount()（如设置初始 dataset、预加载图片） - 挂载后调用
mounted()（如addEventListener、requestAnimationFrame、启动定时器） - 销毁前必须显式调用
unmounted()：清除setTimeout/setInterval、移除事件监听、中断fetch（用AbortController）、释放Canvas上下文 - 避免直接操作 innerHTML；更新应聚焦于
textContent、src、dataset等可变字段，保留结构稳定
attributeChangedCallback 在 <template></template> 场景中完全不生效
这是最容易混淆的一点：<template></template> 不是自定义元素，没有 observedAttributes，也不触发任何生命周期钩子。所有“传参”行为都得靠 JS 工厂函数实现。
- 错误做法：给
<template data-title="abc"></template>写attributeChangedCallback—— 浏览器根本无视 - 正确做法：用函数封装模板逻辑，例如
renderCard({ title: 'abc', id: 123 })，内部用querySelector找到对应节点并赋值 - 参数差异：HTML 属性是字符串，JS 对象可传布尔、数字、对象；别试图让
<template></template>“自动转换类型” - 兼容性影响：依赖
cloneNode的方式在 IE11 中需注意DocumentFragment行为差异，建议统一用innerHTML+createElement回退
真正难的不是写一个能渲染的模板函数，而是确保每次“销毁”都清干净 —— 定时器没 clear、事件没 remove、Canvas 没 getContext('2d').clearRect()，复用时就会出现状态错乱、内存持续增长、滚动卡顿。这些细节不会报错，但会在大屏或长时运行中突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
