Skip to content

vuex3.6.2内存泄漏 #2248

Open
Open
@cug-zgj

Description

@cug-zgj

Version

3.6.2

Describe the bug

将vuex存储的数据使用计算属性引入,使用一个局部变量引用该计算属性,页面销毁前清除vuex的数据,该数据所占用的内容无法被释放

Reproduction

//test.vue
<template>
  <div>
    <div style="display: flex; justify-content: space-between;">
      <button type="button"
              @click="test">test</button>
      <button type="button"
              @click="myLogout">退出</button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'Test',
  data () {
    return {
    }
  },
  methods: {
    myLogout () {
      this.$router.push('/login')
    },

    test () {
      const p = { ...this.accountInfo[0] }
    },

    ...mapActions([
      'initAccountInfo',
      'clearState'
    ])
  },

  mounted () {
    let AccountArr = []
    for (let i = 0; i < 10000; i++) {
      AccountArr.push({ value: i.toString(), label: i.toString() })
    }
    this.initAccountInfo(AccountArr)
  },

  computed: {
    ...mapGetters([
      'accountInfo'
    ]),
  },

  beforeDestroy () {
    this.clearState()
  }
}
</script>
//login.vue
<template>
  <div>
    <div style="display: flex; justify-content: space-between;">
      <button type="button"
              @click="test">test</button>
      <button type="button"
              @click="myLogout">退出</button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'Test',
  data () {
    return {
    }
  },
  methods: {
    myLogout () {
      this.$router.push('/login')
    },

    test () {
      const p = { ...this.accountInfo[0] }
    },

    ...mapActions([
      'initAccountInfo',
      'clearState'
    ])
  },

  mounted () {
    let AccountArr = []
    for (let i = 0; i < 10000; i++) {
      AccountArr.push({ value: i.toString(), label: i.toString() })
    }
    this.initAccountInfo(AccountArr)
  },

  computed: {
    ...mapGetters([
      'accountInfo'
    ]),
  },

  beforeDestroy () {
    this.clearState()
  }
}
</script>
//index.js
import Vue from "vue";
import Vuex from "vuex";


Vue.use(Vuex);

export default new Vuex.Store({
  state:{
    accountInfo:[],
  },
  getters:{
    accountInfo: (state) => state.accountInfo
  },
  mutations:{
    initAccountInfo (state, arr){
      state.accountInfo = arr
    },
    clearState(state){
      state.accountInfo = []
    }
  },
  actions:{
    initAccountInfo({commit},payload) {
      commit('initAccountInfo',payload)
    },
    
    clearState({commit}) {
      commit('clearState')
    }
  }
});

先登录,点击test,然后退出,使用谷歌的memory查看snapshot,array的第一个就是这个未被释放的引用

Expected behavior

期望内存被释放

Additional context

No response

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions