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）处理组件的创建。

表演如何？

最终代码有什么区别？

我还有另一种方法吗？

Answer 1

在 Svelte 中onMount()是一个生命周期事件。这意味着onMount()会在以下时间触发

在组件首次呈现到DOM后运行

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

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

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

两者之间的主要区别不是性能，而是运行功能时可用： -如果您在没有onMount()的情况下运行它，则许多内容（变量，属性等）将不可用 -如果您在onMount()中运行该组件，则该组件将“准备就绪”使用

Answer 2

将onMount视为onload处理程序。加载组件时：运行脚本，解析CSS并将html添加到DOM，然后触发onMount。

因此，在您的示例中，它没有任何区别。是的，传递的属性在onMount之外可用。

但是，如果您尝试访问DOM（使用getElementById之类的东西或使用bind:this将元素绑定到变量），则该顶级脚本将无法使用，但是将在onMount中可用。

下面是显示此内容的副本：

https://svelte.dev/repl/eaa7656f6a98479a82b0a3ad2d105b9b?version=3.29.4

带有或不带有onMount的SvelteJS组件

2 个答案: