This only keeps the first component instance in memory, so it's technically not a memory leak because the total memory won't increase over time. It's still inefficient though and can be improved.

I also ran into this issue while trying to fix a memory leak. It's quite inconvenient while hunting for leaks, as it's something that will get you on the wrong track. Glad to know this now..

You can temporarily circumvent this problem by using the following methods

vue-cli:

  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        options.compilerOptions = options.compilerOptions || {};
        options.compilerOptions.hoistStatic = false;
        return options;
      });

  },

Thanks. For vite you can use:

plugins: [vue({ template: { compilerOptions: { hoistStatic: false } } })],

This only keeps the first component instance in memory, so it's technically not a memory leak because the total memory won't increase over time. It's still inefficient though and can be improved.

这种场景放到动态路由上: 反复大量的不同内容的相同页面组件, 递增的量就异常可观了, 浏览器标签爆掉就非常的简单了.

谢谢。对于 vite 你可以使用：

plugins: [vue({ template: { compilerOptions: { hoistStatic: false } } })],

在vite.config.js 中添加报错