【前端】Svelte：生命周期函数

Svelte 提供了一些强大的生命周期函数，用于管理组件的生命周期。借助这些函数，我们可以在组件的不同状态执行代码，方便控制组件的创建、更新和销毁行为。主要的生命周期函数包括 onMount、beforeUpdate、afterUpdate 和 onDestroy。

本文将通过实例详细介绍每个生命周期函数的使用方法，以及在这些钩子中处理状态、更新和清理的操作。

生命周期函数

onMount：组件挂载到 DOM 后执行，一般用于初始化数据、启动定时器等。
beforeUpdate：在状态或属性更新、重新渲染前触发，用于准备更新。
afterUpdate：组件完成更新并渲染后调用，适合用于 DOM 操作或数据检查。
onDestroy：在组件即将销毁时执行，用于清理事件监听、计时器等。

实战示例：计数器组件

以下示例构建了一个简单的计数器组件，演示了如何使用 Svelte 的生命周期函数 onMount、beforeUpdate、afterUpdate 和 onDestroy 来跟踪和控制组件的状态。

<script>  import { onMount, beforeUpdate, afterUpdate, onDestroy } from 'svelte';  let count = 0;  let timer;  // 组件挂载后执行onMount(() => {  console.log('Component has been mounted.');  // 启动一个计时器，每秒增加一次  timer = setInterval(() => {  count += 1;  }, 1000);  // 清理函数，当组件卸载时会被调用  return () => {  clearInterval(timer);  };  });  // 在每次更新前触发  beforeUpdate(() => {  console.log('Before update: Current count is:', count);  });  // 在每次更新后触发  afterUpdate(() => {  console.log('After update: Current count is:', count);  });  // 组件销毁时执行  onDestroy(() => {  console.log('Component is about to be destroyed.');  clearInterval(timer); // 清理定时器  });  
</script>  <main>  <h1>Count: {count}</h1>  <button on:click={() => count += 1}>Increment</button>  <button on:click={() => count -= 1}>Decrement</button>  
</main>  <style>  main {  text-align: center;  padding: 1em;  max-width: 240px;  margin: 0 auto;  }  h1 {  font-size: 2em;  color: #ff3e00;  }  
</style>

在该示例中：

onMount：当组件首次挂载时，会执行一个定时器，每秒增加 count，并在控制台中输出消息 “Component has been mounted.”。如果组件卸载，将自动清理定时器。
beforeUpdate：在每次状态更新前调用，记录 count 值变化前的状态。
afterUpdate：在更新完成并重新渲染后执行，用于查看更新后的 count 值。
onDestroy：组件销毁时调用，清理定时器并输出组件销毁的消息。