带或不带 onMount 的 SvelteJS 组件

Question

您能帮我理解这两个组件之间的区别吗：

REPL：https://codesandbox.io/s/svelte-onmount-or-not-yhu91

• 使用 onMount：

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

  let canRender;

  onMount(() => {
    setTimeout(() => {
      canRender = true;
    }, 1000);
  });
</script>

{#if canRender}I'm with onMount!{/if}

• 没有 onMount：

<script>
  let canRender;

  setTimeout(() => {
    canRender = true;
  }, 1000);
</script>

{#if canRender}I'm without onMount!{/if}

canRender我的意思是，在很多情况下，由于许多事件或者因为我正在等待 props 的一些延迟，我需要使用布尔值 ( ) 来处理组件的创建。

表演怎么样？

最终代码有什么不同？

我还有其他方法可以做到这一点吗？

Answer 1

在Svelte onMount()中是一个生命周期事件。这意味着onMount()当

在组件首次渲染到 DOM 后运行

来源： https: //svelte.dev/tutorial/onmount

这意味着在第一种情况下，您在setTimeout()组件首次呈现时启动，在第二种情况下，您在setTimeout()JS 到达该代码行时启动。

大多数时候你不会看到时间上的差异（安装会非常快），但是如果你在渲染之前做了很多事情，那么onMount()就会被延迟。

两者之间的主要区别不在于性能，而在于运行函数时可用的onMount()内容： - 如果在没有很多东西（变量、属性等）的情况下运行它，则将不可用 - 如果在以下范围内运行它onMount()该组件将“准备”使用