Vue 中 vuex 内存泄露问题如何处理?-灵析社区

MastFancy

关于 vue 内存泄露问题? 我有 A B 两个页面,互相切换(未使用 `keep-alive`) 发现在 B 页面,会有内存泄露的问题 看下大致代码 * B.vue mounted () { const list = [...this.$store.state.list] list.push({ vm: this }) this.$store.dispatch('updateList', list) } 问题原因应该是, 把当前 vue 实例 push 到了 store,导致数组劫持了 this 的引用 我的解决方案如下 * B.vue mounted () { const list = [...this.$store.state.list] list.push({ vm: this }) this.$store.dispatch('updateList', list) }, beforeDestroy () { const list = this.$store.state.list const index = list.findIndex(item => item.vm === this) if (index !== -1) { list.splice(index, 1) } this.$store.dispatch('updateList', list) } ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240926/40903a79b1a89b97879e949dcad3603a.png) 这样能成功释放内存,我用 chrome devtools 手动回收后, DOM 节点也能成功降下来 `511` 但是后来发现说不要直接操作 store 所以我改成了下面的形式 * B.vue mounted () { const list = [...this.$store.state.list] list.push({ vm: this }) this.$store.dispatch('updateList', list) }, beforeDestroy () { this.$store.dispatch('spliceVm', this) }, * store.js mutations: { SET_LIST (state, data) { state.list = data }, SPLICE_VM (state, vm) { const list = state.list const index = list.findIndex(item => item.vm === vm) if (index !== -1) { list.splice(index, 1) } state.list = list } }, actions: { spliceVm ({ commit }, data) { commit('SPLICE_VM', data) }, updateList ({ commit }, data) { commit('SET_LIST', data) } }, 这样却释放不了内存,DOM 节点也在持续上升到了`557`, 请问我问题出在哪里? ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240926/0b957274c8c372e4e58b02e898b4fd77.png)

阅读量:208

点赞量:0

问AI
B.vue mounted () { const list = [...this.$store.state.list] list.push({ vm: this }) this.$store.dispatch('updateList', list) }, beforeDestroy () { this.$nextTick(() => { this.$store.dispatch('spliceVm', this) }) } store.js mutations: { SET_LIST (state, data) { state.list = data }, SPLICE_VM (state, vm) { const list = state.list const index = list.findIndex(item => item.vm === vm) if (index !== -1) { list.splice(index, 1) } state.list = [...list] // 用浅拷贝状态更新 } }, actions: { spliceVm ({ commit }, data) { commit('SPLICE_VM', data) }, updateList ({ commit }, data) { commit('SET_LIST', data) } }