💡
原文中文，约4200字，阅读约需10分钟。
📝
内容提要
本文探讨了在 Vue 中实现实时 Markdown 渲染的方案，采用 markdown-it 库和分块更新技术，解决了性能和用户状态丢失的问题。最终引入 morphdom 库以实现精准更新，提升渲染效率。下一篇将讨论更优雅的解决方案。
🎯
关键要点
- 需求背景：实现类似 ChatGPT 的对话交互界面，后端通过 SSE 协议推送 Markdown 格式文本。
- Vue 生态缺乏活跃的 Markdown 渲染库，决定使用 markdown-it 库进行渲染。
- 基础渲染方案存在性能和用户状态丢失的问题，需改进为分块更新。
- 分块更新方案通过将 Markdown 按换行符切分，减少全量重渲染，提高性能并保留用户状态。
- 使用 morphdom 库实现精准更新，解决 Markdown 列表更新时的性能问题。
- morphdom 通过最小化 DOM 操作，保留未变化的 DOM 节点及其状态。
- 阶段性成果：从全量刷新到分块更新，再到精准更新，显著提升了渲染效率和用户体验。
- 下篇预告：将探讨在 Vue 中更优雅的 Markdown 精准更新方案。
❓
延伸问答
如何在 Vue 中实现实时 Markdown 渲染？
可以使用 markdown-it 库将 Markdown 转换为 HTML，并通过 v-html 动态渲染。
分块更新技术如何解决 Markdown 渲染中的性能问题？
分块更新通过将 Markdown 按换行符切分，只重新渲染新增的部分，减少了 DOM 操作，提高了性能。
morphdom 库在 Markdown 渲染中有什么优势？
morphdom 可以最小化 DOM 操作，仅更新变化的部分，保留未变化节点的状态，提升渲染效率。
使用 morphdom 时需要注意什么？
虽然 morphdom 提升了性能，但直接操作 Vue 组件的 DOM 可能不够“Vue”，需谨慎使用。
为什么 Vue 生态缺乏活跃的 Markdown 渲染库？
与 React 生态相比，Vue 目前没有维护良好的 Markdown 渲染库，导致开发者需要自行实现。
下一篇文章将讨论什么内容？
下一篇将探讨在 Vue 中更优雅的 Markdown 精准更新方案。
➡️
