HTML模板本身不参与生命周期管理，仅是静态结构载体；真正承担生命周期职责的是自定义元素类和浏览器原生机制，它没有connectedCallback、不响应attributeChangedCallback、也不会触发清理逻辑。
HTML模板本身不参与组件生命周期管理，它只是静态结构载体；真正承担生命周期职责的是自定义元素类（customElements.define()）和浏览器原生机制。
HTML模板不是组件，只是结构快照
一个 <template></template> 标签或外部 HTML 文件，无论多规范、多模块化，都只是字符串或 DOM 片段。它没有 connectedCallback、不响应 attributeChangedCallback、也不会在移除时触发清理逻辑。
- 常见错误现象：把
<template id="user-card">...</template>当作“可复用组件”，却没配class UserCard extends HTMLElement和customElements.define('user-card', UserCard) - 使用场景中必须明确：模板只负责“画什么”，JS 类才决定“什么时候画、怎么响应、怎么销毁”
- 若仅靠模板 + JS 手动克隆插入，等于放弃生命周期控制——滚动复用、属性变更、状态同步全得自己补逻辑
customElements.define() 必须早于模板使用
浏览器解析到 <user-card></user-card> 时，如果 customElements.define() 还没执行，该节点就永久变成 HTMLUnknownElement，后续注册也无效。
- 实操建议：所有
customElements.define()收口到单个同步加载的入口文件（如components/register.js），用<script defer></script>或顶层import加载 - 构建工具要检查：Vite/webpack 不得把自定义元素类打包进
import()动态分支，否则首屏可能空白 - SSR 场景下必须包裹
if (typeof window !== 'undefined')，否则 Node 环境直接报错
模板内容需配合 observedAttributes 才能响应变化
<template></template> 里的结构不会自动绑定属性变更。只有在自定义元素类中声明 static get observedAttributes()，且属性名与 HTML 中完全一致（含连字符、大小写），才能触发 attributeChangedCallback。
- 常见错误现象：写了
<user-card name="张三"></user-card>，但attributeChangedCallback没执行——因为没在类里声明return ['name'] - 属性名必须严格匹配：HTML 写
data-user-id="123"，就要监听'data-user-id'，不是'userId'或'user-id' - 首次渲染不能依赖回调：需在
connectedCallback或constructor中手动调用this.getAttribute('name')读取初始值
模板复用 ≠ 组件复用，滚动/池化需额外设计
connectedCallback 只触发一次，意味着模板插入后不会因重用而重新初始化。列表滚动时反复挂载/卸载同一组 <user-card></user-card>，其内部状态（如计时器、事件监听）不会自动重置。
- 容易踩的坑：在
connectedCallback里直接addEventListener，却没在disconnectedCallback清理，导致内存泄漏 - 实操建议：对高频复用场景（如虚拟滚动），应手动维护实例池，在
connectedCallback中重置状态，而非依赖模板“重绘” -
disconnectedCallback不可靠——元素可能被移入文档片段而非彻底移除，清理逻辑必须双保险（例如加标志位 + MutationObserver 监听）
真正让 HTML 模板“活起来”的，从来不是它自身的结构有多规范，而是它被嵌入哪个类、何时注册、如何响应属性与 DOM 变更。模板是骨架，生命周期是血肉，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
