svelte中的生命周期

每个组件从创建开始，到销毁结束这个过程，都有一个生命周期

生命周期函数就是在生命周期的某个阶段运行的代码

svelte中的生命周期函数目前有5个，每个都需要单独的由svelte包中引入

import {onMount,beforeUpdate,afterUpdate,onDestroy,tick} from "svelte"

onMount(callback: () => void)：将组件挂载到DOM后运行

onMount(callback: () => () => void)
返回值允许为一个函数
返回的函数将在组件销毁时运行

beforeUpdate(callback: () => void)：每次渲染之前运行

首次运行是在组件mounted之前，因此需要在读取DOM之前，检查是否存在。

afterUpdate(callback: () => void)：每次渲染之后运行

onDestroy(callback: () => void)：在组件销毁时运行

tick()：返回一个Promise，在任何一个state状态发生变化时立即resolve

在Svelte中，当改变一个state状态时，不会立即更新DOM，而是会等到下一个微任务时更新，在等待期间会持续监听是否有其他state状态改变，然后在这个微任务中统一更新DOM，这样可以减少一些无用功，让浏览器更有效地批量处理这些事情

但是有些时候我们需要在一个state状态改变时立即在DOM中更新而不是等待下一个微任务时才更新，此时使用tick()函数

<script>
    import { tick } from "svelte";
    let count = 0;
    let dom;
    async function handleUpdate() {
        count++;
        // await tick();
        console.log(t.textContent);
    }
</script>
<div bind:this={dom}>{count}</div>
<button on:click={handleUpdate}>Count ++</button>

以上代码中当点击按钮后执行函数handleUpdate()，cont变量值加1

此时DOM中的cont显示应该改变为1，但是由于微任务的原因，DOM不会立即更新

打印DOM的文本内容可以看出仍然是之前的数字

在下一个微任务时更新DOM，我们人眼很难明显感觉到这个时间差，但是在一些场景中就会出现错误

此时添加一个tick()函数就会在count值改变时立即更新DOM

打印DOM的文本内容也变成了加1之后的数字

但是tick()返回的是一个Promise，所以使用await关键字，也可以使用then语句

await tick();

tick().then(() => {console.log(t.textContent)})