我在VueJS 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条答案
按热度按时间67up9zun1#
事实证明,这个问题是由Vue开发工具引起的。禁用它们可以解决内存泄漏。更多信息:https://github.com/vuejs/core/issues/7408