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ハンドブック

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

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

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