不直接在Ticker修改父组件状态

frontend/src/components/ChatRenderer/Ticker.vue

@@ -169,18 +169,25 @@ export default {
       return constants.getPriceConfig(message.price).pinTime
     },
     updateProgress() {
+      // 更新进度
       this.curTime = new Date()
-      for (let i = 0; i < this.messages.length;) {
-        let message = this.messages[i]
+
+      // 删除过期的消息
+      let filteredMessages = []
+      let messagesChanged = false
+      for (let message of this.messages) {
         let pinTime = this.getPinTime(message)
         if ((this.curTime - message.addTime) / (60 * 1000) >= pinTime) {
-          if (this.pinnedMessage == message) {
+          messagesChanged = true
+          if (this.pinnedMessage === message) {
             this.pinnedMessage = null
           }
-          this.messages.splice(i, 1)
-        } else {
-          i++
+          continue
         }
+        filteredMessages.push(message)
+      }
+      if (messagesChanged) {
+        this.$emit('update:messages', filteredMessages)
       }
     },
     onItemClick(message) {

frontend/src/components/ChatRenderer/index.vue

@@ -2,7 +2,7 @@
   <yt-live-chat-renderer class="style-scope yt-live-chat-app" style="--scrollbar-width:11px;" hide-timestamps
     @mousemove="refreshCantScrollStartTime"
   >
-    <ticker class="style-scope yt-live-chat-renderer" :messages="paidMessages" :showGiftName="showGiftName"></ticker>
+    <ticker class="style-scope yt-live-chat-renderer" :messages.sync="paidMessages" :showGiftName="showGiftName"></ticker>
     <yt-live-chat-item-list-renderer class="style-scope yt-live-chat-renderer" allow-scroll>
       <div ref="scroller" id="item-scroller" class="style-scope yt-live-chat-item-list-renderer animated" @scroll="onScroll">
         <div ref="itemOffset" id="item-offset" class="style-scope yt-live-chat-item-list-renderer" style="height: 0px;">