svelte教程（7）生命周期

onMount

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

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

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

Photo album


    {#each photos as photo}
        

            
            
{photo.title}
        
    {:else}
        
        
loading...
    {/each}

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

Photo album


  {#each photos as photo}
    

      
      
{photo.title}
    
  {:else}
    
    
loading...
  {/each}

onDestory

当销毁组件时调用。

The page has been open for {seconds} {seconds === 1 ? 'second' : 'seconds'}

beforeUpdate 、afterUpdate

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

    
Eliza

    

        {#each comments as comment}
            

                {comment.text}
            
        {/each}
    

    

tick

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

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

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

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