嗨,HN,
我们构建了 vue-renderer-markdown
,这是一款适用于 Vue 3 的高性能流式 Markdown 渲染器。它是从我们的开源 AI 聊天机器人 DeepChat 的核心中提取而来,并经过了生产环境的严格测试。
这不仅仅是一次简单的练习。我们需要为 AI 聊天 UI 实时渲染复杂的流式 Markdown,而现有的解决方案在 Vue 生态系统中性能不足。我们的渲染器通过大幅减少 DOM 更新解决了这个问题。
主要亮点
- **专为 Vue 3 构建:**原生,具有简单直观的 API。
- 极致性能 :**在复杂的流式场景中,它生成的 DOM 节点比 Vercel 的 Streamdown 等替代方案少 100 倍。这对于流畅、响应迅速的 UI 至关重要。
- 久经考验:已在大型应用程序(DeepChat)中得到验证,并被活跃的开发者社区广泛使用。
- 丰富的 Markdown 支持:开箱即用,支持自定义 Vue 组件、表格、数学/LaTeX、语法高亮等功能。
差异呈现:
我们使用同样复杂的 Markdown 语言搭建了两个实时场景,以展示性能和标记差异。
- 我们的 Vue 渲染器 :vue-markdown-renderer.netlify.app
- React (Streamdown): react-stream.netlify.app
NPM:https://www.npmjs.com/package/vue-renderer-markdown
如果您正在使用 Vue 构建 AI 应用程序、聊天机器人或任何内容密集型 UI,不妨尝试一下。我们期待您的反馈!