第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY17- 元件的生命週期

svelte component lifecycle

svelte component lifecycle 是今天要分享的主題,在分享svelte的複合式元件 slot開始要分享一些進階的內容,今天的內容先從生命週期開始。

生命週期跟開發有甚麼關係

通常要說明這類主題時,讀者們都會問生命週期跟我們有甚麼關係,試想一下,如果有些事情在載入元件時要執行一次要如何處理,或者又有些註冊的事件在結束時要取消註冊又該如何處理,還有這些生命週期的順序是怎麼樣排列的,諸如此類的問題都是進一步開發時會遇到的問題,今天這個主題就來說明一下svelte 元件的生命週期,以及如何撰寫事件處理。

svelte component lifecycle 有哪些

今天分享的內容會說明常用的svelte元件的生命週期有哪些,還有如何使用,若是有興趣了解其他未提及的生命週期事件的朋友可以看一下svelte api文件,所以我們先從掛載元件的事件開始介紹。

onMount

這是所有元件開始的第一步,當所有的元件被載入時都會先進入這個事件當中,所以在這裡就可以去執行fetch載入設定檔之類的動作。

beforeUpdate

這是元件開始更新時會進入的事件,所以可以放一些權限檢查的邏輯,如此可以確定使用者能訪問這個頁面。

afterUpdate

這是元件更新後的事件,透過這事件可以來設定資料面的部份。

onDestroy

最後當離開這元件時都會呼叫這個事件,所以可以在這裡做一些釋放註冊的動作。

svelte component lifecycle 該怎麼用呢

介紹完常用的事件後,接下來就說明一下該怎麼使用,我們就拿 onMount 要載入資料為例子,請大家先看一下下面的程式碼。

<script>
    let photos = [];
</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>

這是一個顯示圖片的基礎框架,大家可以到svelte tutorial onmount實際操作一下,但是這例子還沒寫完,因為沒有地方取的照片資料,所以這邊我們要去呼叫API取得照片相關資訊,所以我們修改一下例子,請大家看看修改後的結果。

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

這邊要注意的第一件事情是,使用lifecycle時要先從svelte import進來,這是我們第一次import,之後進階的內容會常常用到,再來這邊也可以搭配await做一個loading的顯示,就留給讀者們試試看了。

小結

今天介紹給大家 svelte component lifecycle 的種類以及用法,也作為進階內容的第一篇,希望大家會喜歡。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *