Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vuex3.6.2内存泄漏 #2248

Open
3 tasks done
cug-zgj opened this issue Jun 6, 2024 · 0 comments
Open
3 tasks done

vuex3.6.2内存泄漏 #2248

cug-zgj opened this issue Jun 6, 2024 · 0 comments

Comments

@cug-zgj
Copy link

cug-zgj commented Jun 6, 2024

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant