在此前《全栈交互体验（上）》中，我们介绍了如何使用 Serverless + Redis 记录浏览量。作为简历上分量最重的核心亮点，单向的浏览量统计只是起步，双向的数据交互（提交与展示评论） 才是补全这块“全栈版图”的最后一块拼图。
本文将专门聚焦我们在开发 <ArticleComments> 组件时，精心设计的前端实战亮眼细节。这也是你在面试时最容易被技术一面捞出来深挖的“前端护城河”。
1. 为什么不用现成的第三方评论插件（如 Waline/Giscus）？
在简历上面试官如果问起：“现在很多静态博客都有成熟的评论组件配置，你为什么要自己手写？”
你的完美对答： “为了彻底打通这套全栈体验闭环。如果仅仅在配置文件里贴一行引入代码，那只能叫‘运维配置’，无法体现我作为前端开发的核心编码能力。 因为我本身通过 Serverless 已经连通了云端 Redis 数据库，所以我选择自己手写一个轻量级的 Vue3 表单组件和 API 接口。这样不仅让我深入实践了组件的双向数据流转、网络请求封装，我还特意在前端层面进行了核心体验优化（如乐观更新）和安全防御（如XSS转义防范）。这些都是集成现成插件所学不到的前端底层与业务经验。”
2. 前端核心亮点一：乐观更新 (Optimistic UI)
这是大型 C 端项目极度常用的体验提升技巧，但很多在校生根本没听说过，说出来绝对会让面试官眼前一亮。
面试官提问： “如果用户网速很慢，或者你的 Serverless 接口响应由于冷启动有点卡，用户点击了‘发送评论’之后，页面一点反应都没有，你会怎么解决这种不良体验？”
你的完美对答： “其实我在写发送逻辑时就考虑到了网络延迟的问题。大多数初学者的做法是：展现 Loading 动画 -> 等待后端返回成功 -> 重新拉取一次整个评论列表。这既慢又费流量。 我使用的是**‘乐观更新（Optimistic UI）’策略**：在通过了前置空校验后，我不等网络请求发出去，立刻把用户刚刚填写的那条评论内容构建成一个展示模型，直接 unshift（推入）到我本地的 comments 响应式数组最顶端。 对于用户来说，他是零延迟地看到了自己的评论出现在页面上。而底层真实发送给后端接口的网络请求是在后台静默执行的，以此给用户极致流畅的交互体验。”
面试官追问： “那如果底层的那个网络请求真的失败了呢？” 你的完美对答： “如果通过 try-catch 捕获到后台请求异常抛出了错误，我会在 catch 代码块里进行状态回滚：将刚才前端数组里第一项（那条虚假乐观数据）shift（弹出）删掉，并弹出友好提示，同时将被清空的输入框内容按变量填回，让用户可以随时无缝重试，形成绝对安全的业务闭环。”
3. 前端核心亮点二：前端安全之防范 XSS 攻击
对于任何具有“用户可以任意输入然后展示给所有人的富文本区”，XSS（跨站脚本攻击） 是一定绕不开的红线问题。
面试官提问： “你的留言板允许访客随便写东西，如果有个懂技术的黑客，在输入框里写了 <script>alert('你的网站被黑了！')</script>，你页面会被注入弹窗病毒吗？”
你的完美对答： “完全不会。在这套项目中我设计了两道防线：
- 渲染层面的天然防御：在使用 Vue3 渲染评论列表时，我使用的是双花括号插值
{{ item.content }}来输出文本，这确保了 Vue 模板引擎在渲染前会自动对尖括号等非法字符进行 DOM 生态安全的字符实体转义处理（无论是什么代码，都会被安全地当做纯文本展示），而绝不会使用会导致存储型 XSS 的v-html指令。 - 接口存储层的深层拦截：虽然前端显示没问题了，为了保证任何人调用我的 API 也无法污染数据库，在 Serverless 端收到 POST 数据的第一时间，我使用正则手动将
<替换为了<，从源头污染库杜绝了危险脚本入库。前后两道防线，彻底杜绝了基本的反射型与存储型 XSS 的风险。”
4. 其它细节点串讲词
除了上面两个核心回答，如果你想在介绍项目时显得你极其严谨，你可以不经意地脱口而出以下几点：
- 按钮防抖与锁定：“考虑到快速连击可能导致脏数据写入，我在点击提交的瞬间挂载了
isSubmitting锁变量，将其绑定到按钮的:disabled属性以及透明度的动态样式上，并在接口的finally生命周期里解锁。” - 无状态组件分发：“因为 Valaxy 博客是由很多 Markdown 文件构成的，我把整个逻辑抽离成了高度内敛独立的
<ArticleComments />组件，只需要像之前一样通过slug传值，就能立刻让任意枯燥的文章获得专属全网在线讨论能力。” - 组件双向绑定：“对于评论昵称和内容框，我采用原生的
v-model进行 Vue 双向状态绑定，比原生 JS 手写事件监听优雅得多。”
留言板