尤雨溪力荐！Vue3 生态 “流式渲染”引擎！

前几天，Vue 作者 尤雨溪 在社交平台上公开推荐了一个 Vue3 生态的全新项目 —— markstream-vue。

这条推荐一出，Vue 社区瞬间沸腾：

“终于有原生为 AI 时代设计的真流式渲染库了！”

更值得关注的是：最新的 AI Elements Vue 组件库，也已经将 markstream-vue 作为底层流式渲染引擎，正式投入使用。

这意味着之后所有基于 Vue 的 AI 应用，都将能享受到真正的“字节级实时渲染”体验。

从 vue-renderer-markdown 到 markstream-vue：一次正式升级

前几天我跟大家分享过一个库 —— vue-renderer-markdown。

今天，它有了一个更正式、更清晰定位的新名字：

markstream-vue：为 AI 流式 Markdown 渲染而生

这不仅是名字升级，也是能力的全面进化。

markstream-vue 特性

• ⚡ 极致性能：针对流式场景最小化重渲染，DOM 更新高效
• 🌊 流式优先：原生支持不完整或频繁更新的 Markdown 内容
• 🧠 Monaco 流式更新：大代码块也能平滑增量高亮
• 🪄 渐进式 Mermaid：语法一够就渲染，后续持续优化
• 🧩 自定义组件：可在 Markdown 中直接嵌入 Vue 组件
• 📦 零配置：Vue 3 项目里开箱即用

增量 DOM 更新

markstream-vue 把 Markdown 先切成 token 流，再映射成 Vue VNode 差量 patch。
一句话：*“新token来多少，就插多少节点，旧节点纹丝不动。”*

AI 输出经常“断句”：

# 标题

1. 第一
2. 第二

第二行还没打完，库就能先渲染出标题 + 第一条，后面慢慢补。

三大区块做特殊流式优化

• 代码块：

• 数学公式：

• Mermaid：

两分钟跑起来

npm i markstream-vue

<template>
<MarkdownRenderer:stream="chunk" />
</template>

<scriptsetup>
import { ref } from'vue'
import MarkdownRenderer from'markstream-vue'

const chunk = ref('')
const evtSource = new EventSource('/api/ai-stream')

evtSource.onmessage = (e) => {
  chunk.value += e.data   // 逐句追加
}
</script>

零配置，chunk 每次多几个字，右侧就能平滑地“长”出来。

实测效果

结语

从 markdown-it → markdown-exit → markstream-vue，Vue 生态把“发动机”和“整车体验”都重新洗了一遍。
AI 时代，内容生成是流式的，渲染也必须流式。

下次你的老板再说“能不能让 AI 回答像 ChatGPT 那样逐字出现”时，
直接：

npm i markstream-vue

📎 相关链接

• 在线体验：https://markstream-vue.simonhe.me/
• GitHub 仓库：https://github.com/Simon-He95/markstream-vue