Vue2实战：如何优雅实现类ChatGPT的AI对话流打字机效果

8次阅读

共计 3401 个字符，预计需要花费 9 分钟才能阅读完成。

在 Vue2 项目中直接使用 setInterval 实现打字机效果，常会遇到以下三个典型问题：

频繁触发响应式更新：每次字符变化都会触发 Vue 的依赖收集和虚拟 DOM 比对，当快速连续修改数据时（如每秒 30 次更新），会导致大量不必要的计算
异步更新队列阻塞：Vue 的批量异步更新机制可能造成帧丢失。当主线程忙于处理响应式更新时，浏览器无法及时执行渲染任务
DOM 操作成本高昂：直接操作 DOM 会导致布局抖动（Layout Thrashing），特别是在移动端低性能设备上表现更明显

相比 setInterval 的固定时间间隔，requestAnimationFrame（RAF）具有天然优势：

自动匹配显示器刷新率（通常 60fps）
当页面处于后台时会自动暂停执行
浏览器会优化同帧中的多次 DOM 操作

function typeWriter(text, callback) {
  let index = 0
  const fragment = document.createDocumentFragment()

  function animate() {if (index < text.length) {fragment.appendChild(document.createTextNode(text.charAt(index)))
      container.appendChild(fragment)
      index++
      requestAnimationFrame(animate)
    } else {callback?.()
    }
  }

  requestAnimationFrame(animate)
}

通过 DocumentFragment 进行批处理操作，可以减少 50% 以上的布局重绘次数：

创建文档片段作为临时容器
将待添加的字符批量插入片段
每完成 5 个字符或每 16ms（约 60fps 间隔）将片段整体插入 DOM

export default {
  methods: {chunkAppend(text) {
      const BATCH_SIZE = 5
      let pos = 0

      const appendChunk = () => {const fragment = new DocumentFragment()
        const endPos = Math.min(pos + BATCH_SIZE, text.length)

        for (; pos < endPos; pos++) {const span = document.createElement('span')
          span.textContent = text[pos]
          fragment.appendChild(span)
        }

        this.$refs.container.appendChild(fragment)

        if (pos < text.length) {this.animationId = requestAnimationFrame(appendChunk)
        }
      }

      this.animationId = requestAnimationFrame(appendChunk)
    }
  }
}

对于光标闪烁等效果，使用纯 CSS 实现性能更佳：

.typewriter-cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background: currentColor;
  animation: blink 1s step-end infinite;
}

@keyframes blink {from, to { opacity: 0}
  50% {opacity: 1}
}

结合 Vue 的 transition-group 处理多行内容动画：

<transition-group 
  name="typewriter" 
  tag="div"
  class="message-container">
  <div 
    v-for="(line, index) in lines" 
    :key="index"
    class="message-line">
    {{line}}
  </div>
</transition-group>

export default {data() {
    return {messages: [],
      currentText: '',
      ws: null,
      reconnectAttempts: 0
    }
  },

  mounted() {this.initWebSocket()

    // 性能监控埋点
    performance.mark('typewriter_start')
  },

  methods: {initWebSocket() {this.ws = new WebSocket('wss://your-api-endpoint')

      this.ws.onmessage = (event) => {const data = JSON.parse(event.data)
        if (data.type === 'chunk') {this.processChunk(data.content)
        }
      }

      this.ws.onclose = () => {if (this.reconnectAttempts < 3) {setTimeout(() => {
            this.reconnectAttempts++
            this.initWebSocket()}, 1000 * this.reconnectAttempts)
        }
      }
    },

    processChunk(chunk) {
      // 使用微任务队列避免阻塞 WebSocket 回调
      Promise.resolve().then(() => {this.typeText(chunk, () => {
          performance.measure('chunk_processed', {
            start: 'typewriter_start',
            end: Date.now()})
        })
      })
    },

    typeText(text, callback) {
      let index = 0
      const animate = () => {if (index < text.length) {this.currentText += text.charAt(index)
          index++

          // 每 10 个字符强制更新一次
          if (index % 10 === 0) {this.$forceUpdate()
          }

          this.animationId = requestAnimationFrame(animate)
        } else {this.messages.push(this.currentText)
          this.currentText = ''
          callback?.()}
      }

      this.animationId = requestAnimationFrame(animate)
    }
  },

  beforeDestroy() {cancelAnimationFrame(this.animationId)
    this.ws?.close()

    // 内存清理
    this.messages = null
    this.currentText = null
  }
}