前端 - Vue 中 vuex 内存泄露问题如何处理？

Question

关于 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)}

  

这样能成功释放内存,我用 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, 请问我问题出在哪里?

Answer 1

B.vuemounted () {  const list = [...this.$store.state.list]  list.push({    vm: this  })  this.$store.dispatch('updateList', list)},beforeDestroy () {  this.$nextTick(() => {    this.$store.dispatch('spliceVm', this)  })}store.jsmutations: {  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)  }}