请教大家流式传输下，前端渲染 Markdown 图片的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 137 天前的主题，其中的信息可能已经有所发展或是发生改变。

lastMessage.message += chunks // 获取数据

<div class="markdown-body" v-html="renderedContent"></div>

get renderedContent() {
    return marked(this.messageContent)
}

如果 renderedContent 含有图片，由于重新渲染，引发“闪烁”现象。尝试以 chunk 中的换行符分割为字符串数组，然后使用 v-for 渲染。但这样会有多余的 div 标签，观察 ChatGPT 的 DOM 树并非如此。请问大家有什么解决思路吗？感激不尽！

4 条回复 • 2024-08-11 08:58:24 +08:00

nagisaushio

137 天前 via Android

缓存收到的数据，等到达了一个元素的边界再更新上去

xiangyuecn

137 天前

原生的高效还简单
div1=document.querySelector(".markdown-body")
div2=doucment.createElement("div") div2.innerHTML=renderedContent
递归对比两个 div 内部元素差异，把新增的直接 appendChild 到页面对应的位置

samuelclassic

137 天前 via iPhone

@nagisaushio
@xiangyuecn 感谢

luckrnx09

136 天前 via iPhone

1 楼正解