面试题：Svelte 中 onMount 生命周期函数的应用场景

Question

请阐述 Svelte 中 onMount 生命周期函数的作用，并举例说明至少两个它适用的实际开发场景。

Answer 1

作用

onMount 生命周期函数在组件首次渲染到 DOM 后立即执行。它允许开发者在组件挂载到 DOM 后执行一些副作用操作，比如操作 DOM、订阅事件、初始化第三方库等，这些操作依赖于组件已在 DOM 中存在的状态。

实际开发场景举例

1. 操作 DOM

假设我们有一个需要在挂载后自动聚焦的输入框：

<script>
  import { onMount } from'svelte';

  let input;
  onMount(() => {
    input.focus();
  });
</script>

<input bind:this={input} type="text" placeholder="自动聚焦">

在上述代码中，onMount 确保在输入框被渲染到 DOM 后立即获得焦点，提供更好的用户体验。

2. 初始化第三方库

例如使用 Chart.js 来绘制图表。当组件挂载后，初始化图表：

<script>
  import { onMount } from'svelte';
  import { Chart } from 'chart.js';

  let canvas;
  onMount(() => {
    const ctx = canvas.getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  });
</script>

<canvas bind:this={canvas}></canvas>

这里 onMount 确保在 canvas 元素被挂载到 DOM 后才去初始化 Chart.js 图表，因为 Chart.js 需要操作实际存在于 DOM 中的 canvas 元素。