Svelteライフサイクルイベント

Svelteでライフサイクルイベントを操作する方法

Svelteのすべてのコンポーネントは、私たちが考えている機能を実装するのに役立ついくつかのライフサイクルイベントを発生させます。

特に、

  • onMountコンポーネントがレンダリングされた後に発生します
  • onDestroyコンポーネントが破壊された後に発生します
  • beforeUpdateDOMが更新される前に発生します
  • afterUpdateDOMが更新された後に発生します

これらのイベントがSvelteによって発生したときに発生する関数をスケジュールできます。

デフォルトではこれらのメソッドにアクセスすることはできませんが、からインポートすることはできます。svelteパッケージ:

<script>
  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte'
</script>

の一般的なシナリオonMount他のソースからデータをフェッチすることです。

これがの使用例ですonMount

<script>
  import { onMount } from 'svelte'

onMount(async () => { //do something on mount }) </script>

onDestroyデータをクリーンアップしたり、コンポーネントの初期化時に開始した可能性のある操作を停止したりできます。たとえば、タイマーやスケジュールされた定期的な関数を使用してsetInterval

注意すべき1つの特別なことは、関数をonMount、と同じ機能を提供しますonDestroy-コンポーネントが破棄されたときに実行されます:

<script>
  import { onMount } from 'svelte'

onMount(async () => { //do something on mount return () => { //do something on destroy } }) </script>

周期関数をマウントで実行するように設定し、破棄時に削除する実際的な例を次に示します。

<script>
  import { onMount } from 'svelte'

onMount(async () => { const interval = setInterval(() => { console.log(‘hey, just checking!’) }, 1000)

<span style="color:#66d9ef">return</span> () =&gt; {
  <span style="color:#a6e22e">clearInterval</span>(<span style="color:#a6e22e">interval</span>)
}

}) </script>

私の無料ダウンロードSvelteハンドブック


より洗練されたチュートリアル: