面试题：Svelte中如何实现生命周期函数与简单路由切换的集成

Question

在Svelte项目中，假设已经有一个简单的路由系统，使用`page`库来实现页面切换，每个页面都有自己的生命周期函数（如`onMount`、`onDestroy`等）。请描述如何将这些生命周期函数与路由切换进行无缝集成，确保在页面切换时，前一个页面的`onDestroy`函数能正确执行，新页面的`onMount`函数能正常触发。并给出一个简单的代码示例。

Answer 1

1. 集成方法描述：
   • 利用page库提供的路由切换事件。在每次路由切换前，调用当前页面的onDestroy函数来清理资源等操作。在路由切换完成后，调用新页面的onMount函数来进行初始化等操作。
2. 代码示例：
   • 首先安装page库：

     npm install page
     

   • 假设项目结构如下：
     • src/routes/home.svelte

     <script>
       import { onMount, onDestroy } from'svelte';
       onMount(() => {
         console.log('Home page mounted');
       });
       onDestroy(() => {
         console.log('Home page destroyed');
       });
     </script>
     <h1>Home Page</h1>
     

     • src/routes/about.svelte

     <script>
       import { onMount, onDestroy } from'svelte';
       onMount(() => {
         console.log('About page mounted');
       });
       onDestroy(() => {
         console.log('About page destroyed');
       });
     </script>
     <h1>About Page</h1>
     

   • 在主入口文件（如main.js）中：

     import page from 'page';
     import { createApp } from'svelte';
     import Home from './routes/home.svelte';
     import About from './routes/about.svelte';
     
     let currentPage;
     
     const mountPage = (Component) => {
       if (currentPage) {
         currentPage.$destroy();
       }
       const app = createApp(Component);
       app.mount(document.body);
       currentPage = app;
     };
     
     page('/', () => {
       mountPage(Home);
     });
     
     page('/about', () => {
       mountPage(About);
     });
     
     page();
     

   • 在上述代码中：
     • mountPage函数负责在每次路由切换时，先销毁当前页面（调用currentPage.$destroy()，这会触发当前页面的onDestroy函数），然后挂载新页面（调用createApp(Component).mount(document.body)，这会触发新页面的onMount函数）。
     • page库定义了不同路径对应的回调函数，在回调函数中调用mountPage来实现页面的切换和生命周期的正确触发。