模板引擎本身不触发渲染，仅生成静态HTML；真正响应式更新需客户端框架（如Vue/React）通过响应式系统驱动patch或手动重写innerHTML。
模板引擎如何触发组件渲染更新
HTML模板技术本身不主动“触发”组件渲染，它只是静态字符串生成工具。所谓“触发优化”，本质是控制何时、以何种结构生成 HTML，从而影响后续 JS 框架（如 Vue/React）的 hydration 效率或原生 DOM 的 diff 成本。
常见误区是以为模板里写个 {{item.name}} 就能自动响应数据变化——其实不是。模板只在服务端或构建时执行一次，输出纯 HTML；真正的响应式更新必须靠客户端框架接管，或手动调用 innerHTML + 重新绑定事件。
- 服务端模板（如 EJS、art-template）：仅生成首屏 HTML，后续交互需显式 hydrate 或重载
- 客户端模板（如 Handlebars）：每次数据变都重新 render 字符串，再
el.innerHTML = html，但会丢失原有事件监听和 focus 状态 - 现代组件框架内嵌模板（如 Vue SFC 的
<template>）：编译为 render 函数，依赖响应式系统驱动 patch，这才是真正“触发渲染”的链路
为什么 <template> 标签不能直接替代模板引擎
<template> 是浏览器原生机制，内容不解析、不执行脚本、不发起请求，只作 DOM 片段缓存。它不处理变量插值、条件判断或循环，也不能读取外部数据对象。
例如你写：
<template id="user-card"><div>{{name}}</div></template>浏览器会原样保留 {{name}} 字符串，不会替换成真实值。想让它生效，必须配合 JS 手动替换，比如用 template.content.textContent.replace(/{{(\w+)}}/g, (m, key) => data[key]) ——这已脱离 <template> 本意，也失去安全性与可维护性。
立即学习“前端免费学习笔记（深入）”；
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 适用场景：预存 UI 结构（如弹窗、列表项）、配合
document.importNode()避免重复创建节点 - 不适用场景：需要动态数据注入、逻辑分支、多层嵌套渲染
- 风险点：若用 innerHTML 注入用户输入内容，未做转义会直接导致 XSS
art-template 中 block 继承失效的真实原因
art-template 的 {{block 'xxx'}} 不是作用域隔离的“组件”，而是文本级拼接。当多个子模板定义同名 block，最终只会保留最后一个定义的内容，中间层的插入点被彻底覆盖，不是“没生效”，是根本没机会被引用。
比如 layout.art 定义了 {{block 'header'}}，inner-layout.art 也定义同名 block，page.art 再定义一次——运行时只有 page.art 的内容会被插入到 layout 的占位处，inner 层的 block 形同虚设。
- 正确做法：所有
block名按区域+职责命名，如'main-header'、'sidebar-nav' - 构建阶段可用脚本扫描项目中全部
.art文件，校验block名是否重复 - 避免超过三层继承：layout → inner → feature → detail 这种结构会让
block查找路径变长，且编译缓存极易失效
服务端模板中 SSR 输出必须是 fragment
直接 res.send('<html><body><div id="root">...</div></body></html>') 是错的。客户端框架 mount 时会把整个 HTML 当作子节点插入已有 DOM，导致结构错乱、hydration 失败、焦点丢失等静默问题。
正确做法是服务端只返回不含 <html>、<body> 的纯 fragment，由统一 layout 模板包裹：
<!DOCTYPE html>
<html>
<head><title>{{title}}</title></head>
<body>
<div id="root"><%- ssrHtml %></div>
<script>window.__INITIAL_STATE__ = <%- initialState %></script>
</body>
</html>-
<%- ssrHtml %>：非转义输出，确保 HTML 结构不被破坏 -
window.__INITIAL_STATE__必须 ≤5KB，过大影响 TTFB 和首屏解析 - 服务端生成的
ssrHtml不能含多余空格、换行或注释，否则会影响 DOM 对齐
复杂点在于：模板引擎只管字符串拼接，而 hydration 对 DOM 结构一致性极其敏感。一个空格、一个缺失的闭合标签、一段未声明的内联样式，都可能让 React/Vue 放弃 hydrate 转而重走 client render，等于白做了 SSR。
