面试题：Svelte组件生命周期之常规方法应用

`onMount`

作用：onMount 会在组件首次渲染到DOM后立即执行。它常被用于需要在组件已被挂载到DOM后执行的操作，比如初始化第三方库、添加事件监听器等。因为在组件挂载前，相关的DOM元素可能还不存在，所以 onMount 提供了一个合适的时机来执行这些依赖于DOM存在的操作。
场景示例：假设要在组件中初始化一个图表库，如Chart.js。

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

  onMount(() => {
    const ctx = document.getElementById('myChart').getContext('2d');
    chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  });
</script>

<canvas id="myChart"></canvas>

`beforeUpdate`

作用：beforeUpdate 会在组件的响应式数据发生变化，且DOM即将更新之前执行。这使得开发者有机会在DOM更新前执行一些操作，例如暂停动画、取消网络请求等，防止在DOM更新过程中出现冲突或不必要的行为。
场景示例：如果在组件中有一个动画正在运行，当数据变化导致组件更新时，需要暂停这个动画。

<script>
  import { beforeUpdate } from'svelte';
  let animationInterval;

  function startAnimation() {
    animationInterval = setInterval(() => {
      // 动画逻辑
    }, 100);
  }

  beforeUpdate(() => {
    clearInterval(animationInterval);
  });

  startAnimation();
</script>

`afterUpdate`

作用：afterUpdate 在组件的响应式数据变化导致DOM更新完成后执行。常用于需要在新的DOM状态下执行的操作，比如重新初始化依赖于更新后DOM结构的第三方库，或者基于更新后的DOM进行一些测量操作。
场景示例：假设组件中有一个可拖动的元素，并且使用了一个库来实现拖动手势。当组件数据更新后，需要重新初始化这个拖动手势库。

<script>
  import { afterUpdate } from'svelte';
  let draggableElement;

  function initDrag() {
    // 使用某个库（如Hammer.js）初始化拖动手势
    new Hammer(draggableElement).on('panstart panmove panend', function(ev) {
      // 拖动手势逻辑
    });
  }

  afterUpdate(() => {
    draggableElement = document.getElementById('draggable');
    initDrag();
  });
</script>

<div id="draggable">可拖动元素</div>

星途面试题库

面试题：Svelte组件生命周期之常规方法应用

知识考点

面试题答案

`onMount`

`beforeUpdate`

`afterUpdate`