HTML模板不是组件，而是静态DOM片段，不绑定数据、不响应更新、不管理生命周期；必须配合JS手动克隆赋值才能使用，且不能直接append content或用innerHTML破坏其特性。
HTML模板不是组件，只是静态结构容器
直接把 <template> 当成“可复用组件”用，是常见误解。它不绑定数据、不响应更新、不管理生命周期——浏览器只把它当一段未激活的 DOM 片段存着。你写 <template id="user-card"><div class="name">{{name}}</div></template>，浏览器不会解析 {{name}}，更不会自动填值。
必须配合 JS 手动克隆和赋值：
const tmpl = document.querySelector('#user-card');const clone = tmpl.content.cloneNode(true);clone.querySelector('.name').textContent = userData.name;- 再
container.appendChild(clone)
漏掉 cloneNode(true) 直接 append tmpl.content，会导致模板被移走、后续无法复用；用 innerHTML 往 <template> 里塞字符串，会破坏其“不渲染”特性，变成普通 HTML 解析。
前端框架的“组件”本质是 JS 对象 + 渲染策略
React 的 <UserCard name="Alice" /> 或 Vue 的 <user-card :name="name"/> 看似像 HTML 标签，实际运行时根本没走 HTML 解析器。React 编译成 React.createElement('UserCard', {name: 'Alice'})，Vue 模板编译成带依赖收集的渲染函数。
立即学习“前端免费学习笔记（深入）”；
关键差异点：
- 首字母小写（如
<div>）→ 浏览器原生标签；首字母大写（如<UserCard>）→ 框架调用对应 JS 函数 -
v-if、{{ }}、ngIf这类语法在纯 HTML 文件里就是普通文本，打开即裸露，毫无作用 - 即使引入 Vue CDN，也必须显式
createApp().mount()，否则所有模板语法静默失效
脱离框架运行时，那些标签只是字符串——不是“HTML 支持组件”，而是框架借用了 HTML 语法糖来描述 JS 行为。
真正驱动表单/页面自动化的，是配置结构 + 渲染引擎
硬写一堆 <input type="email" required> 和 <select>，字段一过 20 个，改校验规则要翻遍 HTML，切 readonly 状态得逐个加属性，样式和逻辑死死耦合。这不是“用 HTML 做模板”，是在用 HTML 写业务逻辑。
大规模动态表单的解法是反向的：用 JSON Schema 描述字段结构、校验规则、渲染类型，再由统一渲染引擎按需生成 DOM。
- 增减字段 → 只改配置，不碰模板
- 统一禁用状态 → 改配置里的
disabled: true，引擎自动同步所有<input> - 校验集中管理 → 不靠
required属性，而由引擎调用校验函数并聚合错误
<form>、<input> 最终只是渲染结果，不是驱动层——它们连不上状态、管不了逻辑、扛不住变化。
服务端模板与前端模板的关键分界点
服务端模板（如 Smarty、Jinja）在返回 HTML 前就完成了数据合并，浏览器收到的是纯静态 HTML 字符串；前端模板（如 Handlebars、Mustache）或框架 JSX 是在浏览器里用 JS 动态拼装，依赖运行时环境。
两种模式不能混用：
- 后端返回
<div>{{name}}</div>→ 前端没模板引擎就原样显示{{name}} - 前端用 AJAX 拿回一段含
v-for的 HTML → Vue 不会自动识别，除非手动compile()，但代价高且难维护 - 直接把服务端渲染的 HTML 插入 React 组件的
innerHTML→ 失去 React 生命周期和状态管理，变成“不可控 DOM”
真正容易被忽略的是：模板语法本身没有执行能力，它只是数据与结构之间的一层映射约定；谁负责解析、谁负责更新、谁持有状态——这才是决定渲染行为的关键。
