原生标签不是模板引擎，它不解析插值、不执行逻辑、不响应数据变化；浏览器将其视为纯结构仓库，内容存于只读documentfragment中，所有{{title}}等占位符均按字面量保留，不会被解释或替换，必须用js手动克隆、填充、绑定、挂载才能实现多视图切换。
原生 <template></template> 标签不是模板引擎，它不解析插值、不执行逻辑、不响应数据变化——你不能靠它直接“处理多视图组件”，必须用 JS 手动克隆、填充、绑定、挂载。
为什么直接写 {{title}} 在 <template></template> 里没反应
浏览器把 <template></template> 当作纯结构仓库，template.content 是只读的 DocumentFragment，里面所有文本（包括 {{title}}、v-if、）都按字面量保留，不会被解释或替换。常见现象是页面空白、控制台无报错、DOM 中能看到原始占位符文本。
- 这不是 bug，是规范行为：HTML 标准明确要求
<template></template>内容不参与渲染流程 - 想让它“动起来”，唯一路径是 JS 主动操作克隆后的节点
- 若需语法糖（如插值、循环），得引入 EJS、Go template、Thymeleaf 等服务端引擎，或 Vue/React 等客户端框架
用 <template></template> + JS 实现多视图切换的最小可行方案
核心是把每个视图抽象为一个独立 <template id="view-home"></template>，再由 JS 控制哪份克隆体显示在容器中。
- 每个
<template></template>用语义化 class（如.user-card、.product-list）而非 ID 定位，避免重复冲突 - 切换时先清空容器：
container.innerHTML = ''，再cloneNode(true)插入新视图 - 每次克隆后必须重绑事件：
clone.querySelector('button').addEventListener('click', handler)，事件委托在多视图下容易漏触发或误触发 - 对用户输入字段（如
config.description）统一用textContent赋值，防 XSS；图片src做协议校验（仅允许https:、data:、/开头）
Spring Boot / Go / Node.js 中真正能“处理多视图”的模板引擎怎么选
服务端模板引擎才具备条件判断、循环、继承、include 等能力，它们本质是服务端 HTML 编译器，不是浏览器里的 DOM 操作工具。
-
Go：用
template.ParseGlob("templates/*.html")批量加载，配合{{define "header"}}…{{end}}和{{template "header" .}}实现布局复用 -
Node.js + EJS：改
.html为.ejs，加和…即可生效，无需重写结构 -
Spring Boot：配置多个
ViewResolver（如ThymeleafViewResolver、InternalResourceViewResolver），用@Order(1)控制优先级，避免 404 —— 顺序错了，.html请求可能被 jsp 解析器截胡
真正难的不是写模板，而是决定数据在哪层注入、状态在哪层维护、错误在哪层捕获。原生 <template></template> 把这些全甩给 JS，而服务端引擎把逻辑收编到渲染前一刻——选哪种，取决于你愿不愿意让服务器承担视图组装责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
