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

Question

我想通过在浏览器中查看运行在我的网络服务器上的作业的输出日志来监控它。我正在使用 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>

Answer 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...");
},

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