Svelte 生命周期:挂载与卸载

Posted 右究

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Svelte 生命周期:挂载与卸载相关的知识,希望对你有一定的参考价值。

正文

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

以上是关于Svelte 生命周期:挂载与卸载的主要内容,如果未能解决你的问题,请参考以下文章

react组件通信与生命周期

react组件通信与生命周期

react组件通信与生命周期

Vue生命周期与单向、单次、双向绑定

react父子组件生命周期执行顺序

vue 的8个生命周期