Nuxt2/Vue2路由切换时组件销毁内存未释放如何优化

问题背景 #

我有两个页面组件，每个组件包含两个本地数据字段，我在created生命周期钩子中为这些数据赋值，之后在两个页面间反复切换路由，通过开发者工具的内存面板观测到，堆内存占用会随每次路由切换持续增长。据我所知Vue应当自动移除已销毁组件的所有关联数据，但实际表现与预期不符。

复现代码 #

首页文件 ~/pages/index.vue #

<template>
  <nuxt-link to="/contact">跳转到contact页</nuxt-link>
</template>
<script>
export default {
  data() {
    return {
      testArr: [],
      str: "...", // 此处赋值为体积非常大的字符串
    };
  },
  created() {
    for (let i = 0; i < 100000; i++) {
      this.testArr.push({ // 构造足够大的数组放大内存问题
        key1: this.str,
        key2: this.str,
        key3: this.str,
        key4: this.str,
        key5: this.str,
      });
    }
  },
  destroyed() {
    // 进入destroyed生命周期时，仍然可以访问到
    // this.str、this.testArr 两个字段
    console.log("组件已销毁");
  },
};
</script>

联系页文件 ~/pages/contact.vue #

<template>
  <nuxt-link to="/">返回首页</nuxt-link>
</template>
<script>
export default {
  data() {
    return {
      testArr: [],
      str: "...", // 此处赋值为体积非常大的字符串
    };
  },
  created() {
    for (let i = 0; i < 100000; i++) {
      this.testArr.push({ // 构造足够大的数组放大内存问题
        key1: this.str,
        key2: this.str,
        key3: this.str,
        key4: this.str,
        key5: this.str,
      });
    }
  },
  destroyed() {
    // 进入destroyed生命周期时，仍然可以访问到
    // this.str、this.testArr 两个字段
    console.log("组件已销毁");
  },
};
</script>

对比测试结果 #

测试发现，如果在两个页面中都添加如下beforeDestroy钩子逻辑，手动将大字段置为undefined，内存就不会出现持续增长的情况：

beforeDestroy() {
  this.str = undefined;
  this.testArr = undefined;
},

但按照框架设计预期，Vue应当自动释放已销毁组件关联的内存，且在destroyed生命周期内访问this上挂载的数据字段应当返回undefined，实际表现和预期不符。

咨询问题 #

请问该如何优化应用，实现组件销毁时自动释放内存，避免已销毁组件的关联数据驻留内存？

当前使用版本 #

• nuxt：2.15.8
• vue：2.6.14

内容的提问来源于stack exchange，提问作者Ahmad Reza