VueJS 3更新组件状态时出现内存泄漏问题求助

问题场景 #

我在Vue 3中遇到内存泄漏：应用通过WebSocket持续接收更新，每次更新会替换状态对象，但旧对象无法被垃圾回收。用极简组件复现了该问题：

<script setup>
import { reactive } from 'vue'

const state = reactive({ data: {} })

updateData(0)

function updateData(count) {
  state.data = { str: `Iteration ${count}` }

  setTimeout(() => updateData(count + 1), 10)
}
</script>

<template>
  <div>{{ state.data.str }}</div>
</template>

运行后内存占用持续增长，无回落迹象。

补充测试
即使仅更新对象属性而非替换对象，内存泄漏依然存在：

function updateData(count) {
  state.data.str = `Iteration ${count}`

  setTimeout(() => updateData(count + 1), 10)
}

只有完全移除状态修改，内存才能正常回收：

function updateData(count) {
  setTimeout(() => updateData(count + 1), 10)
}

问题根源 #

1. 递归setTimeout的闭包泄漏：每次递归调用都会创建新的闭包，持有state和count的引用，旧闭包无法被回收。
2. 高频更新阻塞垃圾回收：10ms一次的高频更新让浏览器没有足够时间触发GC，同时Vue的响应式更新队列积累大量任务，导致内存占用飙升。
3. 响应式追踪的额外开销：Vue对响应式对象的深层追踪会产生额外的依赖信息，高频更新下这些信息无法及时被清理。

可行解决方案 #

1. 替换递归setTimeout为setInterval #

递归setTimeout会不断生成新的定时器实例，改用setInterval可避免重复创建，同时组件卸载时必须清理定时器：

<script setup>
import { reactive, onUnmounted } from 'vue'

const state = reactive({ data: { str: '' } })
let count = 0
const updateTimer = setInterval(() => {
  state.data.str = `Iteration ${count++}`
}, 10)

// 组件卸载时清理定时器
onUnmounted(() => {
  clearInterval(updateTimer)
})
</script>

<template>
  <div>{{ state.data.str }}</div>
</template>

2. 优化响应式追踪策略 #

如果不需要深层响应式，使用shallowReactive替代reactive，减少深层依赖追踪的开销：

import { shallowReactive } from 'vue'
const state = shallowReactive({ data: {} })

若某些对象无需响应式，用markRaw标记，避免Vue对其进行响应式包装：

import { markRaw } from 'vue'
state.data = markRaw({ str: `Iteration ${count}` })

3. 强制清理异步任务与订阅 #

组件销毁时必须清理所有定时器、WebSocket连接等异步资源，防止残留引用：

onUnmounted(() => {
  // 清理WebSocket
  if (ws) ws.close()
  // 清理定时器
  clearInterval(updateTimer)
})

4. 对高频更新做节流处理 #

如果业务允许，降低实际更新到响应式状态的频率，减少响应式系统的压力：

import { throttle } from 'lodash-es'

const updateState = throttle((count) => {
  state.data.str = `Iteration ${count}`
}, 50)

let count = 0
setInterval(() => {
  updateState(count++)
}, 10)

内容的提问来源于stack exchange，提问作者Alexander