Svelte 生命周期：挂载与卸载

Posted 2021-06-10 右究

正文

Svelte 作者是怎么想到的呀，居然把 onMount 和 beforeDestroy 合起来了：当 onMount 返回一个函数时，该函数会在组件销毁时调用，只能说NB..

下面是子组件 Child.svelte，会发现在 onMount 函数内返回了一个 function：

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

  // life cycle
  onMount(() => {
    alert("子组件创建好啦~");

    // 在组件销毁时调用
    return () => {
      alert("子组件被销毁咯~");
    };
  });
</script>

<h1>我是子组件</h1>

下面是父组件，通过 if 块实现对子组件挂载与卸载的演示：

<script>
  import Child from "./Child.svelte";

  // state
  let status = false;

  // computed
  $: desc = status ? "销毁子组件" : "挂载子组件";

  // methods
  const toggle = () => (status = !status);
</script>

{#if status}
  <Child />
{/if}

<button on:click={toggle}>{desc}</button>

参考

https://www.sveltejs.cn/tutorial/onmount