Vue 3 禁用组件缓存 - 以前的组件现在正在堆叠
Vue 3 disable caching of components - previous components are now being stacked
我正在开发一个 Vue3 应用程序，其中包含一个呈现 D3 图表的组件。
当我导航到另一个页面并返回到相同的 D3 组件但具有不同的数据时，就会出现问题。 D3 图表不断相互堆叠。
我正在使用 Vue3，发现禁用组件缓存有点困难，但也许我错过了一些选项。我不介意完全禁用缓存，因为大部分数据都是从 localStorage 获取的，所以很快
这里用沙箱来说明问题：
https://codesandbox.io/s/vue-3-vuex-4-vue-router-forked-eem3ui?file=/src/components/Miserables.vue
如果您单击“悲惨世界”link，然后单击另一个 link（玩家列表或关于）并返回到悲惨世界，您会看到堆叠的图表。
您的代码中至少有 2 个“味道”：
- 每次安装 Miserables 组件时，您都在创建和注入
<script> 标签 - 多次安装后，您将有很多重复的 JavaScript代码，可能会污染全局命名空间（多次）甚至更糟 - 可能会附加多个事件处理程序或设置计时器；
- 在每次安装时，您都会创建一个新的 SVG 并将其附加到 BODY - 因此您在页面上获得多个 SVG 并不是 Vue 的错；
我正在开发一个 Vue3 应用程序，其中包含一个呈现 D3 图表的组件。 当我导航到另一个页面并返回到相同的 D3 组件但具有不同的数据时，就会出现问题。 D3 图表不断相互堆叠。 我正在使用 Vue3，发现禁用组件缓存有点困难，但也许我错过了一些选项。我不介意完全禁用缓存，因为大部分数据都是从 localStorage 获取的，所以很快
这里用沙箱来说明问题：
https://codesandbox.io/s/vue-3-vuex-4-vue-router-forked-eem3ui?file=/src/components/Miserables.vue
如果您单击“悲惨世界”link，然后单击另一个 link（玩家列表或关于）并返回到悲惨世界，您会看到堆叠的图表。
您的代码中至少有 2 个“味道”：
- 每次安装 Miserables 组件时，您都在创建和注入
<script>标签 - 多次安装后，您将有很多重复的 JavaScript代码，可能会污染全局命名空间（多次）甚至更糟 - 可能会附加多个事件处理程序或设置计时器； - 在每次安装时，您都会创建一个新的 SVG 并将其附加到 BODY - 因此您在页面上获得多个 SVG 并不是 Vue 的错；