如何通过HTML模板实现组件的生命周期钩子-html教程-PHP中文网

纯html模板无生命周期钩子，其所谓“生命周期”实为绑定的运行时环境（如vue、react、web components）提供；vue中钩子写在js逻辑层，web components通过connectedcallback/disconnectedcallback实现，react则依赖useeffect。

如何通过html模板实现组件的生命周期钩子

HTML模板本身没有生命周期钩子

直接回答：纯 HTML 模板（比如 <template></template>、<script type="text/html"></script> 或字符串模板）不提供生命周期钩子——它只是静态结构，不参与实例化、挂载或销毁过程。所谓“HTML 模板的生命周期”，实际是绑定它的运行时环境（如 Vue、React、Web Components）提供的能力，不是 HTML 自身的特性。

Vue 中用 `<template></template>` 配合组件选项定义钩子

Vue 的单文件组件或选项式 API 里，<template></template> 是声明视图结构的部分，但钩子写在 JS 逻辑层：created、mounted、beforeUnmount 等必须放在组件配置对象或 setup() 中，不能写在 <template></template> 标签内。

<template></template> 只负责渲染，所有副作用逻辑（如请求、定时器、事件监听）都得在钩子函数里手动管理
如果用组合式 API，onMounted、onUnmounted 必须在 setup() 内调用，且需配合 import { onMounted } from 'vue'
错误写法：<template><div>...</div></template> —— @mounted 不是合法指令，不会触发

Web Components 中用 `connectedCallback` 和 `disconnectedCallback`

原生自定义元素（Custom Elements）才是最贴近“HTML 模板 + 生命周期”的组合：你用 <template></template> 定义结构，再通过 customElements.define() 注册类，生命周期由类的方法控制。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

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);