Svelte tick

tick函數(shù)不同于其他生命周期函數(shù)，因?yàn)槟憧梢噪S時(shí)調(diào)用它，而不用等待組件首次初始化。它返回一個(gè)帶有resolve方法的 Promise，每當(dāng)組件pending狀態(tài)變化便會(huì)立即體現(xiàn)到DOM中 (除非沒有pending狀態(tài)變化)。

在Svelte中每當(dāng)組件狀態(tài)失效時(shí)，DOM不會(huì)立即更新。 反而Svelte會(huì)等待下一個(gè) microtask 以查看是否還有其他變化的狀態(tài)或組件需要應(yīng)用更新。這樣做避免了瀏覽器做無(wú)用功，使之更高效。

這點(diǎn)在本示例中有所體現(xiàn)。選擇文本，然后按“Tab”鍵。 因?yàn)?nbsp;<textarea> 標(biāo)簽的值已發(fā)生變化，瀏覽器會(huì)將選中區(qū)域取消選中并將光標(biāo)置于文本末尾，這顯然不是我們想要的，我們可以借助tick函數(shù)來(lái)解決此問(wèn)題：

import { tick } from 'svelte';

然后在 this.selectionStart 和 this.selectionEnd 設(shè)置結(jié)束前立即運(yùn)行handleKeydown：

await tick();
this.selectionStart = selectionStart;
this.selectionEnd = selectionEnd;

示例代碼

<script>
	let text = `Select some text and hit the tab key to toggle uppercase`;

	async function handleKeydown(event) {
		if (event.which !== 9) return;

		event.preventDefault();

		const { selectionStart, selectionEnd, value } = this;
		const selection = value.slice(selectionStart, selectionEnd);

		const replacement = /[a-z]/.test(selection)
			? selection.toUpperCase()
			: selection.toLowerCase();

		text = (
			value.slice(0, selectionStart) +
			replacement +
			value.slice(selectionEnd)
		);

		// this has no effect, because the DOM hasn't updated yet
		this.selectionStart = selectionStart;
		this.selectionEnd = selectionEnd;
	}
</script>

<style>
	textarea {
		width: 100%;
		height: 200px;
	}
</style>

<textarea value={text} on:keydown={handleKeydown}></textarea>