<template> 标签本身不构成单向数据流，它只是静态容器；真正实现单向数据流靠 JS 工厂函数 + 显式数据传入 + 不修改 props 的约束逻辑，因其内容被浏览器跳过解析、不执行脚本、不响应数据变化，且无编译/运行时绑定机制。
<template> 标签本身不构成单向数据流，它只是静态容器；真正实现单向数据流，靠的是 JS 工厂函数 + 显式数据传入 + 不修改 props 的约束逻辑。
为什么<template>不能直接承载单向数据流
浏览器跳过 <template> 内容解析，它不执行脚本、不加载资源、不响应数据变化。你写 <div data-bind="title">{{title}}</div>，它不会自动替换 {{title}} —— 这不是 Vue 模板引擎，没有编译期或运行时绑定机制。
- 常见错误：把
<template>当成可复用组件标签直接插入 DOM，结果页面空白 - 更隐蔽的坑：用
innerHTML = tmpl.innerHTML填充，会丢失<input checked>等表单控件当前状态 -
cloneNode(true)复制后含<script>或<style>，也不会执行或生效
如何用document.importNode()安全克隆并注入数据
这是唯一能保留表单状态、正确处理 <select> 选项、兼容 Shadow DOM 的克隆方式。必须配合手动查找和填充逻辑，才能模拟“单向流入”效果。
- 获取模板：
const tmpl = document.getElementById('card-template') - 深克隆内容：
const fragment = document.importNode(tmpl.content, true) - 遍历绑定点：
fragment.querySelectorAll('[data-bind]')，按data-bind="title"匹配字段 - 填充文本节点：
node.textContent = data.title（避免 XSS，禁用innerHTML直接插用户数据） - 挂载到容器：
container.appendChild(fragment)，不要用innerHTML = ...覆盖已有结构
怎样让工厂函数体现“单向”语义
所谓单向，是指数据只从调用方流向组件实例，组件内部不反向污染输入源。这完全依赖 JS 层约定，而非 HTML 原生能力。
立即学习“前端免费学习笔记（深入）”；
- 禁止在工厂函数内修改传入对象：
data.title = 'new'是破坏单向性的典型错误 - 若需本地状态，显式声明：
const localState = { editMode: false, draft: data.content } - 计算派生值用纯函数：
const cardClass = data.isFeatured ? 'card--featured' : 'card'，不依赖副作用 - 模板中禁用硬编码 ID：
id="card-1"会导致多次渲染后 ID 冲突，改用data-id或 class 控制 - 属性名优先用
data-bind="author-name"而非class="author"，便于后续扩展绑定逻辑
真正的难点不在克隆或填充，而在于每次调用工厂函数时，是否严格区分“输入数据”和“本地状态”。一旦在组件内部偷偷改了传入对象的属性，或者用闭包缓存并修改了原始引用，单向性就崩了——而这根本不会报错，只会让数据流变得不可追溯。
