如何使用Vue快速将多行附加到div（一次一行）并滚动到底部？

Posted 2023-02-16

【中文标题】如何使用Vue快速将多行附加到div（一次一行）并滚动到底部？

【英文标题】：How to quickly append multiple lines to div (one at a time) and scroll to bottom using Vue?

【发布时间】：2019-10-02 17:27:36

【问题描述】：

我想通过在浏览器中查看运行在我的网络服务器上的作业的输出日志来监控它。我正在使用 websockets 将作业的输出发送到 Vue 元素。输出是逐行发送的，我想将最新的行附加到 Vue 元素并滚动到 div 的底部以模拟在作业输出文件上运行 tail -f。

它可以工作，但是如果快速发送行，浏览器 CPU 使用率会非常高，并且页面呈现速度非常慢。在 Chrome DevTools 中，我可以实时看到我的 websockets 消息很好。所以我显然没有有效地将每一行添加到 Vue 元素中。

将文本逐行附加到vue元素并不断滚动到底部，有什么更有效的方法？

或者我应该缓冲 websocket 消息并一次处理几行？

<div id="job_output_vue" class="wordwrap">
    <pre>text</pre>
</div>

<script>
    var logSocket = new WebSocket('wss://' + window.location.host + '/ws/jobOutput/');

    logSocket.onmessage = function (event) 
    data = JSON.parse(event.data)
    if (data.line!==undefined)
        
        appLog.appendText(data.line);
        
    

    var appLog = new Vue(
            el: '#job_output_vue',
            data: 
            text: ""
        ,
        methods:
        
            appendText(newText) 
                this.text = this.text + newText;
                this.scrollToEnd();
                ,
            scrollToEnd() 
                var container = this.$el;
                container.scrollTop=container.scrollHeight;
                
        ,
        mounted() 
            this.appendText("Loading...");
        ,
        beforeDestroy() 
        ,
        );
</script>

【参考方案1】：

我可能是错的，但我认为滚动是这里的昂贵操作。您可以尝试为text 属性添加一个观察者，并在那里处理滚动：

...
methods: 
  appendText(newText) 
    this.text = this.text + newText;
  ,
  scrollToEnd() 
    var container = this.$el;
    container.scrollTop=container.scrollHeight;
  
,
watch: 
  text() 
    this.scrollToEnd();
  
,
mounted() 
  var vm = this;
  this.appendText("Loading...");
,

我还没有尝试过，但我很想知道它是否比您开始时的性能更高。让我知道这是否有效！

【讨论】：

你是对的！是滚动减慢了它的速度。但似乎 onresize 在您的回答中根本没有被调用。 div 的大小保持不变，只是添加了更多内容。

Shoot... 好的，试试更新的解决方案，它使用了一个观察者。

谢谢，但这与原版的性能相似。我实现了一个计数器，每 25 行只滚动到底部，并且在不冻结浏览器的情况下工作，但这并不是我希望看到的终端感觉。

有趣的是，如果我将滚动命令移出 Vue 定义，它工作正常： appLog.$el.scrollTop = appLog.$el.scrollHeight; （在 websocket onmessage 中）。