SvelteではコンポーネントがDOMにマウントされると実行される関数を使用するために、use:actionとonMountが用意されている。

use:action

型定義

action = (node: HTMLElement, parameters: any) => {
	update?: (parameters: any) => void,
	destroy?: () => void
}

使用例

<script>
	let foo = 1
	
	const exampleAction =(node,parameters) => {
		// コンポーネントが DOM にマウントされると実行される
		console.log("Mount");
		return {
			// parametersが更新された時、実行される
			update: (parameters) => { console.log(parameters) },
			// 関数を返すとコンポーネントがアンマウントされる直前に実行する
			destroy: () => { console.log("Destroy") }
		}
	}
</script>

<div use:exampleAction={foo} />

<button on:click={()=>{foo++}}>
	increment
</button>

備考

update()を返しておくと、リアクティブな値の時に呼ばれるようになる。

onMount

型定義

onMount(callback: () => void)  
onMount(callback: () => () => void)

使用例

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

	onMount(() => {
                // コンポーネントが DOM にマウントされると実行される
		console.log('Mount');

                // 関数を返すとコンポーネントがアンマウントされる直前に実行する
                return () => {console.log('Destroy')}
	});
</script>

備考

DOMにアクセスするにはbind:thisを使用する必要がある

まとめ

use:actionはDOM操作に特化しているので,DOMを操作する必要があるものに関してはuse:actionを使用するのが良いと思う。
逆にそれ以外の場合はonMountを使用する感じで。

use:actionを使用すべき時

update()が必要な時
特定の要素に依存しているもの

例：フォームバリデーション

onMountを使用すべき時

特定の要素に依存していないもの

例：cookieやIndexedDBを使うとき

タグ: Svelte

svelte use:actionとonMount

SvelteKitでMarkdownブログを作った