Trong Svelte, các lifecycle là các pha mà một component thông qua trong quá trình của nó từ khi được khởi tạo, cập nhật cho đến khi bị hủy.

Có một số lifecycle methods mà bạn có thể sử dụng trong Svelte:

onMount

Được gọi khi component được render và thêm vào DOM lần đầu tiên. Thường được sử dụng để thực hiện các công việc khởi tạo như lấy dữ liệu từ API hoặc thiết lập các event listeners.

import { onMount } from 'svelte';

onMount(() => {
  // Các công việc khởi tạo khi component được mount
});

beforeUpdate và afterUpdate

beforeUpdate được gọi trước khi component được cập nhật do thay đổi trong props hoặc state. afterUpdate được gọi sau khi component đã cập nhật.

import { beforeUpdate, afterUpdate } from 'svelte';

beforeUpdate(() => {
  // Các công việc trước khi component cập nhật
});

afterUpdate(() => {
  // Các công việc sau khi component đã cập nhật
});

tick

Hàm tick không giống các hàm vòng đời khác ở chỗ bạn có thể gọi nó bất kỳ lúc nào, không chỉ khi thành phần khởi tạo lần đầu tiên. Nó trả về một lời hứa sẽ được giải quyết ngay khi mọi thay đổi trạng thái đang chờ xử lý được áp dụng cho DOM (hoặc ngay lập tức, nếu không có thay đổi trạng thái đang chờ xử lý nào).

Khi bạn cập nhật trạng thái thành phần trong Svelte, nó không cập nhật DOM ngay lập tức. Thay vào đó, nó đợi đến vi nhiệm vụ tiếp theo để xem liệu có bất kỳ thay đổi nào khác cần được áp dụng hay không, kể cả trong các thành phần khác. Làm như vậy sẽ tránh được những công việc không cần thiết và cho phép trình duyệt sắp xếp mọi thứ hiệu quả hơn.

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

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

	async function handleKeydown(event) {
		if (event.key !== 'Tab') 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);

		await tick();
		this.selectionStart = selectionStart;
		this.selectionEnd = selectionEnd;
	}
</script>

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

<style>
	textarea {
		width: 100%;
		height: 100%;
		resize: none;
	}
</style>