如何在离开页面时强制卸载Svelte中的Phaser游戏组件？

问题根源 #

Phaser游戏实例初始化时会在DOM中创建独立的画布元素，若组件销毁时未主动清理游戏实例和对应的DOM节点，这些元素会留在页面中；返回页面时组件重新渲染，又会创建新的游戏实例，导致重复出现。

解决方案 #

核心是在Game.svelte组件销毁时，彻底清理Phaser游戏实例及关联DOM：

1. 在Game.svelte中添加生命周期钩子
   在组件内使用Svelte的onDestroy钩子，销毁Phaser游戏实例并清理DOM：

   <script>
       import { onDestroy } from 'svelte';
       import Phaser from 'phaser';
   
       let game;
       export let final_score = 0;
   
       // 初始化游戏
       const initGame = () => {
           game = new Phaser.Game({
               type: Phaser.AUTO,
               parent: 'game-container', // 对应组件内的容器ID
               width: 800,
               height: 600,
               // 你的游戏配置...
               scene: {
                   // 你的游戏场景逻辑，记得在游戏结束时更新final_score
                   // 比如：this.events.on('gameOver', () => final_score = ...)
               }
           });
       };
   
       initGame();
   
       // 组件销毁时清理游戏
       onDestroy(() => {
           if (game) {
               // 销毁游戏实例，true参数会自动清理关联的DOM元素
               game.destroy(true);
               // 额外清空容器，确保无残留
               const container = document.getElementById('game-container');
               if (container) container.innerHTML = '';
               game = null; // 释放引用
           }
       });
   </script>
   
   <div id="game-container"></div>
   

2. 确保父组件正确触发组件卸载

   • 若使用SvelteKit路由：页面切换时，页面组件会自动卸载，子组件Game也会随之销毁，只要Game.svelte做好清理逻辑即可。
   • 若使用条件渲染控制显示：比如通过{#if isPageActive}包裹Game组件，离开页面时将isPageActive设为false，确保组件被销毁。

验证效果 #

切换页面后检查页面DOM，确认游戏画布元素已被移除；返回页面时，游戏会重新初始化，不会出现重复实例。

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