ASP.NET Core <cache/>缓存含内联Vue模板的视图组件异常问题

<cache/>标签助手的缓存逻辑 #

<cache/>是ASP.NET Core Razor内置的服务端缓存方案，和浏览器缓存完全无关：

• 首次请求未命中缓存时，标签内部的Razor逻辑会正常执行，生成的完整HTML字符串会被存储到服务端配置的缓存介质（内存、Redis等）中
• 后续请求命中缓存时，服务端会直接把预存的HTML字符串拼接进响应返回，不会重新执行标签内部的任何Razor渲染、标签助手处理逻辑

缓存后Vue编译失败的根因 #

问题出在模板脚本上的at="Foot"属性：
这个属性是Razor生态中通用的脚本位置标记，正常渲染流程中，Razor引擎会遍历所有渲染节点，把标记了at="Foot"的脚本块从当前渲染位置提取出来，统一插入到页面底部</body>标签前的位置，不会保留在组件原本的输出位置。

• 首次加载未命中缓存时，<cache/>内部的组件正常渲染，引擎能识别到<script type="text/x-template" id="vue-user-feedback">这个模板脚本，将其提取到页脚输出。最终返回给浏览器的DOM中页脚位置存在对应id的模板节点，Vue初始化时可以正常找到模板完成编译，功能运行正常。
• 后续请求命中缓存时，服务端直接返回预存的组件HTML，不会重新执行组件内部的标签助手逻辑，也就无法识别、提取这个标记了at="Foot"的模板脚本到页脚。最终浏览器拿到的页面DOM中，既不会在组件位置找到这个模板脚本（因为正常渲染时它本来就会被移走，不会存到缓存内容里），也不会在页脚位置找到对应模板，Vue初始化时找不到匹配id的模板节点，自然无法完成组件编译，表现为组件丢失。

• 方案1：移除x-template脚本上的at="Foot"标记，让模板脚本直接渲染在组件所在的DOM位置，不参与Razor的页脚脚本收集流程。这样缓存的HTML内容本身就包含完整的模板节点，无论是否命中缓存，浏览器都能在DOM中读取到对应模板，Vue可以正常编译。
• 方案2：调整Vue模板定义方式，不依赖DOM中存储的x-template：可以直接把模板字符串写在Vue组件的template配置项中，或把模板编译逻辑打包进插件自带的JS资源里，在组件注册时直接传入模板，完全脱离对Razor脚本收集逻辑的依赖，从根源上避免缓存影响。
• 方案3：如果必须保留at="Foot"的脚本延迟输出逻辑，就不要把包含这类需要被引擎收集处理的脚本块的组件放在<cache/>标签包裹范围内，避免缓存跳过脚本收集流程。

内容的提问来源于stack exchange，提问作者user2058413