纯HTML模板无生命周期钩子，其所谓“生命周期”实为绑定的运行时环境（如Vue、React、Web Components）提供；Vue中钩子写在JS逻辑层，Web Components通过connectedCallback/disconnectedCallback实现，React则依赖useEffect。
HTML模板本身没有生命周期钩子
直接回答：纯 HTML 模板（比如 <template>、<script type="text/html"> 或字符串模板）不提供生命周期钩子——它只是静态结构，不参与实例化、挂载或销毁过程。所谓“HTML 模板的生命周期”，实际是绑定它的运行时环境（如 Vue、React、Web Components）提供的能力，不是 HTML 自身的特性。
Vue 中用 <template> 配合组件选项定义钩子
Vue 的单文件组件或选项式 API 里，<template> 是声明视图结构的部分，但钩子写在 JS 逻辑层：created、mounted、beforeUnmount 等必须放在组件配置对象或 setup() 中，不能写在 <template> 标签内。
-
<template>只负责渲染，所有副作用逻辑（如请求、定时器、事件监听）都得在钩子函数里手动管理 - 如果用组合式 API，
onMounted、onUnmounted必须在setup()内调用，且需配合import { onMounted } from 'vue' - 错误写法：
<template><div @mounted="doSomething">...</div></template>——@mounted不是合法指令，不会触发
Web Components 中用 connectedCallback 和 disconnectedCallback
原生自定义元素（Custom Elements）才是最贴近“HTML 模板 + 生命周期”的组合：你用 <template> 定义结构，再通过 customElements.define() 注册类，生命周期由类的方法控制。
-
constructor：元素创建时执行（此时 DOM 尚未挂载，不能操作this.shadowRoot） -
connectedCallback：元素被插入文档时触发（等价于mounted），适合初始化、添加事件监听 -
disconnectedCallback：元素从文档移除时触发（等价于unmounted），必须在这里清理定时器、事件监听器 - 注意：
adoptedCallback和attributeChangedCallback使用场景有限，多数情况只需前两个
示例片段：
立即学习“前端免费学习笔记（深入）”；
class MyCard extends HTMLElement {
constructor() {
super();
const template = document.querySelector('#my-card-template');
this.attachShadow({ mode: 'open' }).appendChild(template.content.cloneNode(true));
}
connectedCallback() {
console.log('已挂载');
}
disconnectedCallback() {
console.log('已卸载');
}
}
customElements.define('my-card', MyCard);React 中 HTML 模板需借助 JSX 或 useEffect 模拟生命周期
React 没有传统意义上的“模板”，但如果你用字符串模板（如 innerHTML）或第三方模板引擎，就彻底脱离了 React 的响应式系统——也就失去了 useEffect 这类机制。真正可行的是用 JSX + useEffect。
-
useEffect(() => { /* mount 逻辑 */ }, [])对应mounted -
useEffect(() => { return () => { /* unmount 清理 */ } }, [])对应beforeUnmount - 别试图在
dangerouslySetInnerHTML的内容里埋钩子——DOM 插入后 React 不会跟踪它，状态变化也不会更新那部分 - 如果必须动态解析 HTML 字符串，至少用
useRef保存节点引用，并在useEffect清理时手动移除事件监听
关键点始终一致：生命周期属于运行时框架或平台，不是 HTML 的语法能力。把逻辑塞进模板标签里，只会让调试变难、内存泄漏更隐蔽。
