💡
原文中文，约4200字，阅读约需10分钟。
📝
内容提要
本文探讨了在 Vue 中实现实时 Markdown 渲染的方案，采用 markdown-it 库和分块更新技术，解决了性能和用户状态丢失的问题。最终引入 morphdom 库以实现精准更新，提升渲染效率。下一篇将讨论更优雅的解决方案。
🎯
关键要点
- 需求背景：实现类似 ChatGPT 的对话交互界面，后端通过 SSE 协议推送 Markdown 格式文本。
- Vue 生态缺乏活跃的 Markdown 渲染库，决定使用 markdown-it 库进行渲染。
- 基础渲染方案存在性能和用户状态丢失的问题，需改进为分块更新。
- 分块更新方案通过将 Markdown 按换行符切分，减少全量重渲染，提高性能并保留用户状态。
- 使用 morphdom 库实现精准更新，解决 Markdown 列表更新时的性能问题。
- morphdom 通过最小化 DOM 操作，保留未变化的 DOM 节点及其状态。
- 阶段性成果：从全量刷新到分块更新，再到精准更新，显著提升了渲染效率和用户体验。
- 下篇预告：将探讨在 Vue 中更优雅的 Markdown 精准更新方案。
➡️
