Svelte 迷途求索（三） 生命週期

每個元件都有從建立到銷毀的過程，這個過程被稱為生命週期

生命週期可以解決一些業務上的需求，比如元件載入時請求資料、元件銷毀時清除定時器

svelte 提供了五個生命週期函式：元件載入 onmount、更新前 beforeupdate、更新後 afterupdate、元件銷毀 ondestroy、tick

下面將介紹這些生命週期函式的用法，以及它們各自的觸發時機

一、元件載入

svelte 提供的onmount函式會在元件載入完成後執行，類似於原生的 window.onload

一些需要在頁面載入時請求的介面，可以通過 onmount 呼叫

<

script
>
import  from 
'svelte';
onmount(async () 
=>
);script
>

而對於父子元件，當子元件的 onmount 執行完畢之後，才會執行父元件的 onmount，也就是從內到外

此外，如果 onmount 返回了乙個函式，這個函式就會在元件銷毀時執行

onmount(async () =>

});

而對於父子元件，會先執行父元件的 beforeupdate，然後執行子元件的 beforeupdate

當子元件的 beforeupdate 執行完畢之後，再執行父元件的 afterupdate，最後執行子元件的 afterupdat

還有一點需要注意，如果元件中同時存在 beforeupdate 與 onmount，首次 beforeupdate **會在 onmount 之前

而父元件的 onmount 會在子元件的執行完畢後才執行，所以子元件 beforeupdate/afterupdate 的首次呼叫，會在父元件 onmount 之前

三、元件銷毀

svelte 提供的ondestroy函式會在元件載入完成後執行

<

script
>
import  from 
'svelte';
ondestroy(() 
=>
);script
>

而父子元件則是從外到內，先執行父元件的 ondestroy，再執行子元件的 ondestroy

上面介紹 onmount 的時候有提到，onmount 返回的函式會在元件銷毀的時候執行，這個函式會在 ondestroy 之後執行

所以乙個完整的生命週期是這樣的：

// child a 是 parent 的子元件，child a-1 是 child a 的子元件

載入：

更新：

銷毀：

四、tick

開發過程中可能會遇到這種問題：元件中的某個狀態更新了，但 dom 沒有更新

這時就可以使用tick函式，它會返回乙個 promise，當元件的狀態更新之後，會觸發這個 promise 的 resolves

其實 tick 就像是 vue 中的 nexttick，或者簡單粗暴的理解為 settimeout

簡單的說，我們可以借助 tick 來執行一段非同步**，從而解決資料更新但 dom 不更新的問題

<

script
>
import  from 
'svelte';
beforeupdate(async () 
=>
);script
>

Autofac 之三 生命週期

1 instanceperdependency 對每乙個依賴或每一次呼叫建立乙個新的唯一的例項。這也是預設的建立例項的方式。2 instanceperlifetimescope 在乙個生命週期域中，每乙個依賴或呼叫建立乙個單一的共享的例項，且每乙個不同的生命週期域，例項是唯一的，不共享的。3 ins...

Mybatis實戰（三）生命週期分析

本文將重點討論mybatis中幾個重要物件的範圍和生命週期。不正確的使用它們會導 致嚴重的併發問題。這個類可以被例項化,使用和丟棄。一旦你建立了 sqlsessionfactory 後,這個類就不需 要存在了。因此 sqlsessionfactorybuilder 例項的最佳範圍是方法範圍 也就是本...

Angular學習 三 生命週期鉤子

angular提供了生命週期鉤子，把這些關鍵生命時刻暴露出來，賦予我們在它們發生時採取行動的能力。可以將鉤子函式理解為在合適的時候做合適的事情。官方給出的解釋是 每個元件都有乙個被 angular 管理的生命週期。angular 建立它，渲染它，建立並渲染它的子元件，在它被繫結的屬性發生變化時檢查它...