面试题：Svelte复杂路由场景下生命周期函数的优化集成

1. 数据加载与生命周期函数集成

onMount 函数：在 Svelte 组件中，onMount 可用于在组件首次渲染到 DOM 后执行操作。在子路由组件中，可在 onMount 里发起异步数据加载。例如：

<script>
  import { onMount } from'svelte';
  import { get } from 'svelte/store';
  import { someStore } from './stores.js';
  let data;
  const { id } = $page.params; // 假设通过 Svelte Router 提供的 $page 获取路由参数

  onMount(async () => {
    try {
      const response = await fetch(`/api/data/${id}`);
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      data = await response.json();
      // 可更新 store
      someStore.set(data);
    } catch (error) {
      // 处理错误
      console.error('Error loading data:', error);
    }
  });
</script>

{#if data}
  <!-- 展示数据 -->
  <div>{data.someProperty}</div>
{:else}
  <div>Loading...</div>
{/if}

beforeUpdate 与 afterUpdate：beforeUpdate 可用于在组件更新前执行操作，afterUpdate 则在更新后执行。例如，如果路由参数变化导致需要重新加载数据，可在 beforeUpdate 中取消之前未完成的请求（若使用了 AbortController），并在 afterUpdate 中处理更新后的数据展示等逻辑。

2. 性能优化

防抖与节流：如果路由切换频繁，可对数据加载操作进行防抖或节流处理。例如，使用 lodash 的 debounce 函数，防止短时间内多次重复加载相同数据。

import { debounce } from 'lodash';

const loadData = debounce(async (id) => {
  // 数据加载逻辑
}, 300);

缓存数据：在 store 中缓存已加载的数据。在加载数据前，先检查 store 中是否已有对应数据，若有则直接使用，避免重复请求。

<script>
  import { get } from'svelte/store';
  import { dataStore } from './stores.js';
  const { id } = $page.params;
  let data = get(dataStore)[id];

  if (!data) {
    // 发起数据加载
  }
</script>

3. 组件状态管理

使用 store：通过 Svelte 的 store 管理组件状态。如上述示例中，将加载的数据存入 store，以便其他组件也能访问。同时，可通过 subscribe 监听 store 的变化，实时更新组件视图。

<script>
  import { subscribe } from'svelte/store';
  import { someStore } from './stores.js';
  let data;
  const unsubscribe = subscribe(someStore, (value) => {
    data = value;
  });

  // 在组件销毁时取消订阅
  $: onDestroy(() => {
    unsubscribe();
  });
</script>

4. 错误处理

加载失败处理：在数据加载的 try - catch 块中捕获错误。如上述 onMount 示例，捕获错误后可在组件中展示友好的错误提示。

{#if error}
  <div>Error: {error.message}</div>
{:else if data}
  <!-- 展示数据 -->
{:else}
  <div>Loading...</div>
{/if}

全局错误处理：可在应用级别设置全局错误处理机制，例如使用 Svelte 的 error 事件。在 main.js 中：

import App from './App.svelte';

const app = new App({
  target: document.body,
  onError(error) {
    console.error('Global error:', error);
    // 可记录错误日志，展示全局错误提示等
  }
});

export default app;

星途面试题库

面试题：Svelte复杂路由场景下生命周期函数的优化集成

知识考点

面试题答案

1. 数据加载与生命周期函数集成

2. 性能优化

3. 组件状态管理

4. 错误处理