HTML模板本身不产生数据，只作为“画布”和“占位”，真实数据必须由外部注入：服务端渲染时写入data-属性或内联script，或前端框架（Vue/React）挂载后通过响应式系统接管；静态模板靠手动替换或构建时注入，无运行时更新能力。
HTML模板里数据从哪来、到哪去
HTML模板本身不产生数据，它只负责“画布”和“占位”。真实的数据流向必须由外部注入——要么是服务端渲染时写进data-属性或内联script，要么是前端框架（如Vue/React）挂载后通过响应式系统接管。常见错误是把模板当成数据容器，比如在index.html里硬编码<h1>{{ title }}</h1>却不引入任何框架，结果页面直接显示花括号。
- 静态模板（纯HTML+CSS）：数据靠手动替换或构建时注入，无运行时更新能力
- 服务端模板（EJS、Handlebars）：数据由后端传入，渲染完成即固化，刷新才变
- 前端框架模板（Vue/React）：数据绑定依赖实例挂载点（如
el: '#app'）和响应式声明（data或useState），DOM更新由框架驱动
组件匹配失败的三个典型信号
所谓“组件匹配”，是指模板中某个区域（比如商品列表区块）能否被正确识别、复用并接收对应数据。匹配失败不是语法报错，而是内容不出现、样式错乱或交互失效。
-
Uncaught TypeError: Cannot read property 'map' of undefined：模板里写了v-for或{products.map(...)}，但传入的products是undefined或null - 页面空白但控制台无报错：组件已注册，但挂载点
id或ref名与模板中实际元素不一致（比如Vue里el: '#root'，但HTML只有<div id="app"></div>） - 多个同名组件渲染出同一份数据：没给列表项加唯一
key（Vue）或key属性（React），导致DOM复用错乱
HTML语义标签如何影响数据流向设计
<header>、<main>、<aside>这些标签本身不传递数据，但它们定义了逻辑边界，直接影响组件拆分粒度和数据作用域。比如把整个页脚写成一个<footer>块，就天然适合封装为FooterComponent，其数据（版权年份、联系方式）也应独立于MainContent。
- 避免用
<div class="header">替代<header>：前者无法被辅助技术识别，也不利于组件命名一致性 -
<section>建议配合data-*属性携带上下文标识，例如<section data-section="product-list">，方便JS按需初始化对应组件 - 不要在
<nav>里塞商品数据：导航组件只管链接结构，菜单项URL和文字可来自配置对象，但商品详情必须由<main>下的专用组件加载
模板中嵌入动态内容的安全边界
当需要把富文本、用户评论或后台生成的HTML片段插入模板时，直接用innerHTML或v-html极危险。Vue的v-html和React的dangerouslySetInnerHTML都明确警告了XSS风险，但很多人忽略净化步骤。
立即学习“前端免费学习笔记（深入）”；
- 永远不信任后端返回的HTML字符串，哪怕它来自自己系统
- 使用
DOMPurify.sanitize(htmlString)过滤后再注入，尤其要禁用<script>、onerror、javascript:等危险模式 - 如果只是插纯文本，优先用
textContent或{{ }}插值，而不是降级到HTML注入
真正麻烦的从来不是怎么把数据塞进模板，而是谁该负责校验、谁决定渲染时机、以及出错时该由哪一层兜底——这些边界一旦模糊，模板就从工具变成隐患源。
