Svelteでライフサイクルイベントを操作する方法
Svelteのすべてのコンポーネントは、私たちが考えている機能を実装するのに役立ついくつかのライフサイクルイベントを発生させます。
特に、
onMount
コンポーネントがレンダリングされた後に発生しますonDestroy
コンポーネントが破壊された後に発生しますbeforeUpdate
DOMが更新される前に発生しますafterUpdate
DOMが更新された後に発生します
これらのイベントが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> () => {
<span style="color:#a6e22e">clearInterval</span>(<span style="color:#a6e22e">interval</span>)
}
})
</script>
私の無料ダウンロードSvelteハンドブック
より洗練されたチュートリアル:
- Svelte入門-短いチュートリアル
- Svelteで小道具を操作する方法
- Svelteにコンポーネントをインポートする方法
- Svelteコンポーネントから関数と変数をエクスポートする方法
- Svelteテンプレート:条件付きロジック
- Svelteコンポーネントをオンデマンドで再レンダリングする方法
- Svelteスロット
- Svelteテンプレートにコメントを追加する方法
- Svelteバインディング
- Svelteでの状態更新の処理
- Svelteのリアクティブステートメント
- Svelteライフサイクルイベント
- Svelteテンプレート:ループ
- SvelteテンプレートでPromiseを解決する
- Svelteでのイベントの操作
- Svelteのクロスコンポーネント状態管理
- スクリプトモジュールの外部でSapperのURLパラメータにアクセスする方法
- SvelteでCSSを動的に適用する方法
- SapperでURLにリダイレクトする方法
- Svelteテンプレートでforループをシミュレートする方法