svelte教程(7)生命周期-阿里云开发者社区

开发者社区> sullay> 正文

svelte教程(7)生命周期

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用 Jupyter Notebook 运行 Delta Lake 入门教程
因为官方教程是基于商业软件 Databricks Community Edition 构建,虽然教程中使用的软件特性都是开源 Delta Lake 版本所具备的,但是考虑到国内的网络环境,注册和使用 Databricks Community Edition 门槛较高。所以本文尝试基于开源的 Jupiter Notebook 重新构建这个教程。
674 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10084 0
svelte教程(5)事件
DOM 事件 事件绑定 <script> let m = { x: 0, y: 0 }; function handleMousemove(event) { m.x = event.clientX; m.
914 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13890 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11889 0
svelte教程(7)生命周期
onMount onMount将在组件首次呈现到DOM之后运行。除了onDestroy之外,生命周期函数不会在SSR期间运行,这意味着一旦组件挂在到DOM上,我们就可以避免在DOM构建之前获取到应在DOM构建以后加载的数据。
1190 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22404 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
OpenCV教程(41) 人脸特征检测
在OpenCV中,自带着Harr分类器人脸特征训练的文件,利用这些文件,我们可以很方面的进行人脸,眼睛,鼻子,表情等的检测。      人脸特征文件目录: ../opencv2.46/opencv/data/haarcascades 人脸检测Harr分类器的介绍:http://www.cnblogs.com/mikewolf2002/p/3437883.html 分类器的训练步骤:http://note.sonots.com/SciSoftware/haartraining.html 本文中,我们通过代码了解一下在OpenCV中如何通过harr分类器进行人脸特征检测。
856 0
+关注
18
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载