修复同时添加和删除消息时会触发所有消息的动画的问题(vuejs/vue#6857)

frontend/src/components/ChatRenderer/index.vue

@@ -47,7 +47,6 @@
 import TextMessage from './TextMessage.vue'
 import LegacyPaidMessage from './LegacyPaidMessage.vue'
 import PaidMessage from './PaidMessage.vue'
-import { METHODS } from 'http';
 
 export default {
   name: 'ChatRenderer',

frontend/src/views/Room.vue

@@ -179,9 +179,12 @@ export default {
     addMessageShow(message) {
       message.id = this.nextId++
       this.messages.push(message)
-      if (this.messages.length > 50) {
-        this.messages.splice(0, this.messages.length - 50)
-      }
+      // 防止同时添加和删除项目时所有的项目重新渲染 https://github.com/vuejs/vue/issues/6857
+      this.$nextTick(() => {
+        if (this.messages.length > 50) {
+          this.messages.splice(0, this.messages.length - 50)
+        }
+      })
     },
     handleMessagesBuffer() {
       // 3秒内未发出则丢弃