svelte教程（7）生命周期

onMount

onMount将在组件首次呈现到DOM之后运行。除了onDestroy之外，生命周期函数不会在SSR期间运行，这意味着一旦组件挂在到DOM上，我们就可以避免在DOM构建之前获取到应在DOM构建以后加载的数据。

必须在逐渐初始化时调用生命周期函数，不能再setTimeout中调用。

如果onMount返回一个函数，则在销毁组件时将调用该函数。

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

    let photos = [];

    onMount(async () => {
        const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
        photos = await res.json();
    });
</script>

<style>
    .photos {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 8px;
    }

    figure, img {
        width: 100%;
        margin: 0;
    }
</style>

<h1>Photo album</h1>

<div class="photos">
    {#each photos as photo}
        <figure>
            <img src={photo.thumbnailUrl} alt={photo.title}>
            <figcaption>{photo.title}</figcaption>
        </figure>
    {:else}
        <!-- this block renders when photos.length === 0 -->
        <p>loading...</p>
    {/each}
</div>

通过测试发现onMount的回调函数执行顺序在onDestroy之后。并且返回不能是promise对象，也就意味着如果使用async关键字将不会在组件销毁时执行。

<script>
  import { onMount, onDestroy } from "svelte";

  let photos = [];
  onMount(() => {
    fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`)
      .then(res => {
        return res.json();
      })
      .then(res => {
        photos = res;
      });
    return () => {
      console.log("onMount end2");
    };
  });
  onDestroy(() => {
    console.log("onDestroy2");
  });
</script>

<style>
  .photos {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 8px;
  }

  figure,
  img {
    width: 100%;
    margin: 0;
  }
</style>

<a href="/">Photo album</a>

<div class="photos">
  {#each photos as photo}
    <figure>
      <img src={photo.thumbnailUrl} alt={photo.title} />
      <figcaption>{photo.title}</figcaption>
    </figure>
  {:else}
    <!-- this block renders when photos.length === 0 -->
    <p>loading...</p>
  {/each}
</div>

onDestory

当销毁组件时调用。

<script>
  import { onDestroy } from "svelte";
  let seconds = 0;
  const interval = setInterval(() => (seconds += 1), 1000);
  onDestroy(() => clearInterval(interval));
</script>

<p>The page has been open for {seconds} {seconds === 1 ? 'second' : 'seconds'}</p>

beforeUpdate 、afterUpdate

beforeUpdate 在DOM更新前运行，afterUpdate 在DOM更新后运行。

<script>
    import Eliza from 'elizabot';
    import { beforeUpdate, afterUpdate } from 'svelte';

    let div;
    let autoscroll;

    beforeUpdate(() => {
        autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
    });

    afterUpdate(() => {
        if (autoscroll) div.scrollTo(0, div.scrollHeight);
    });

    const eliza = new Eliza();

    let comments = [
        { author: 'eliza', text: eliza.getInitial() }
    ];

    function handleKeydown(event) {
        if (event.which === 13) {
            const text = event.target.value;
            if (!text) return;

            comments = comments.concat({
                author: 'user',
                text
            });

            event.target.value = '';

            const reply = eliza.transform(text);

            setTimeout(() => {
                comments = comments.concat({
                    author: 'eliza',
                    text: '...',
                    placeholder: true
                });

                setTimeout(() => {
                    comments = comments.filter(comment => !comment.placeholder).concat({
                        author: 'eliza',
                        text: reply
                    });
                }, 500 + Math.random() * 500);
            }, 200 + Math.random() * 200);
        }
    }
</script>

<style>
    .chat {
        display: flex;
        flex-direction: column;
        height: 500px;
        max-width: 320px;
    margin: 0 auto;
    }

    .scrollable {
        flex: 1 1 auto;
        border-top: 1px solid #eee;
        margin: 0 0 0.5em 0;
        overflow-y: auto;
    }

    article {
        margin: 0.5em 0;
    }
  .eliza{
    text-align: left;
  }
    .user {
        text-align: right;
    }

    span {
        padding: 0.5em 1em;
        display: inline-block;
    }

    .eliza span {
        background-color: #eee;
        border-radius: 1em 1em 1em 0;
    }

    .user span {
        background-color: #0074D9;
        color: white;
        border-radius: 1em 1em 0 1em;
    }
</style>

<div class="chat">
    <h1>Eliza</h1>

    <div class="scrollable" bind:this={div}>
        {#each comments as comment}
            <article class={comment.author}>
                <span>{comment.text}</span>
            </article>
        {/each}
    </div>

    <input on:keydown={handleKeydown}>
</div>

tick

tick不同于其他生命周期，因为您可以随时调用它，而不仅是组件首次初始化时。它返回一个promise，该promise在任何pending状态的promise状态更改并应用于DOM时立刻执行resolve。如果没有pending状态的promise时，则立即执行resolve。

当您在Svelte中更改组件状态时，它不会立即更新DOM。而是等到下一个微任务，看看是否还有其他需要应用的更改，包括在其他组件中。这样做避免了不必要的工作，并使浏览器可以更有效地对事物进行批处理。

下面例子中使用tab切换大小写，如不过不适用tick，由于text 更改后，dom并没有马上更新，所以立刻设置光标位置然后dom更新后失效。使用tick可以解决这个问题。

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

    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)
        );

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

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

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

本教程的所有代码均上传到github有需要的同学可以参考 https://github.com/sullay/svelte-learn。