b-table memory leak with vue-router and <keep-alive>

[sprocket99]

Describe the bug

I have a b-table like so:

  <b-table primary-key="id" :fields="packages.fields" :items="packagesData" :filter="packages.filter" :busy="packages.isBusy" head-variant="light" filter-debounce="200" sticky-header no-border-collapse small show-empty hover bordered>
    <div slot="table-busy" class="text-center text-primary">
      <b-spinner class="align-middle"></b-spinner>
    </div>
  </b-table>

And my code is:

  export default {
    data: function () {
      return {
        packages: {
          filter: '',
          fields: [
            {
              key: 'targetType',
              label: 'Target',
              sortable: false,
              thStyle: { width: '100px !important' }
            },
            {
              key: 'fileName',
              label: 'Package',
              sortable: false,
              thClass: 'align-left',
              tdClass: 'align-left'
            },
            {
              key: 'version',
              sortable: false
            },
            {
              key: 'bootType',
              label: 'Boot',
              sortable: false
            }
          ],
          isBusy: false
        }
      };
    },
    async activated() {
      await this.refreshPackages();
    },
    methods: {
      async refreshPackages(force) {
        if (force || !this.packagesData || this.packagesData.length === 0) {
          // only goes in here once...
          this.packages.isBusy = true;
          await this.$store.dispatch('refreshNodePackages', this.$route.params.id);
          this.packages.isBusy = false;
        }
      }
    },
    computed: {
      node() {
        return this.nodesLookup[this.$route.params.id];
      },
      packagesData() {
        return this.nodePackagesLookup[this.$route.params.id];
      }
    }
  };

This page remains active using keep-alive and is launched using:

<b-button @click="$router.push({name: 'node-detail', params: { id: row.item.id }})"></b-button>

Steps to reproduce the bug

1. Hit the page, DOM node count goes from like 1000 to 8000 (I have 800+ rows in the table)
2. Press back
3. Press forward
4. DOM count increases by 8K every time

Expected behavior

For this to only happen once. I commented out just the HTML for b-table and the issue did not occur, but then I had no table either.

Versions

Libraries:

• BootstrapVue: 2.0.3

Environment:

• Browser: Chrome

Here is a .gif of me navigating back and forward on the browser:

[tmorehouse]

@sprocket99 There are issues with Vue's <keep-alive> component:

• <keep-alive> doesn't destroy cached components after when max is 1: <keep-alive> doesn't destroy cached components after when max is 1 vuejs/vue#9972
• Memory leak when using "transition" and "keep-alive": Memory leak when using "transition" and "keep-alive" vuejs/vue#9842

And a similar issue is present with vue-router and keep-alive

[tmorehouse]

Which version of Vue and Vue-router are you using?

<b-table> doesn't retain any references to the actual DOM elements (just passes the rendered vNodes to Vue to deal with).

I would suggest removing the <keep-alive> to see if the problem clears up, and if so then it would be related to the upstream bugs with keep-alive and vue router.

[sprocket99]

I am using:

"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.3",
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-axios": "^2.1.5",
"vue-router": "^3.1.3",
"vuex": "^3.1.1"

I think I am on the latest versions of everything. So the bugs are old and fixed at this point. Also I have no max set. I simply have a parent with:

<div class="container-fluid">
  <keep-alive>
    <router-view />
  </keep-alive>
</div>

Also, yes obviously the problem will go away if I take the <keep-alive> off. Since the component will be destroyed and won't have a chance to accumulate anything.

[sprocket99]

I can discount the router because I can do:

<b-collapse  :visible="expanded">
  // table here with v-if="expanded" also
</b-collapse>

The problem occurs if I expand and collapse this again and again. So the rendering of the table somehow plays into it. Navigation is not needed.

[sprocket99]

It probably is to do with keep-alive since I can repeat it even when I replace the b-table with a vanilla HTML table. Ill raise upstream, maybe I am doing something incorrectly.