Javascript 带或不带onMount的SvelteJS组件

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

答复:

• 使用onMount：

从“svelte”导入{onMount}；
让我们可以呈现；
onMount（（）=>{
设置超时（（）=>{
canRender=true；
}, 1000);
});
{#如果能呈现}我和安蒙特在一起！{/if}

• 没有onMount：

让我们可以呈现；
设置超时（（）=>{
canRender=true；
}, 1000);
{#如果能呈现的话}我没有钱了！{/if}

我的意思是，在很多情况下，我需要使用布尔（

canRender

）来处理组件的创建，因为有很多事件，或者因为我正在等待一些道具的延迟

表演怎么样

最后的代码有什么不同

---

我有别的方法吗？

在Svelte

onMount（）

是一个生命周期事件。这意味着

onMount（）

在

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

资料来源：

这意味着在第一种情况下，当组件第一次呈现时启动

setTimeout（）

，在第二种情况下，当JS到达代码行时启动

setTimeout（）

大多数情况下，您看不到时间上的差异（装载将非常快），但是如果在渲染之前做了很多事情，那么装载（）将延迟

两者之间的主要区别不是性能，而是运行函数时可用的功能： -如果在没有

onMount（）

的情况下运行它，很多东西（变量、属性等）将不可用

---

-如果在

onMount（）

中运行它，组件将“准备好”使用

将

onMount

视为一个

onload

处理程序。加载组件时：运行其脚本，解析css，并将html添加到DOM中，然后触发

onMount

所以在你的例子中，这不会有任何区别。是的，传入的属性在

onMount

之外可用

但是，如果您试图访问DOM（通过使用

getElementById

或使用

bind:this

将元素绑定到变量），顶级脚本将无法访问该DOM，但可以在

onMount

中访问

下面是一个repl，它显示了以下内容：

---

谢谢你的回答。你能更好地解释一下吗：“当你运行你的函数时，什么是可用的”？如果我有一个

导出延迟

，它可以在我的代码中使用，有没有onMount，对吧？对不起，但我不太擅长Svelte-但是组件的生命周期意味着某些功能是按顺序运行的（比如设置组件的属性），如果调用引用未设置属性的函数，那么你的功能就要失败了。例如，在Vue中，您无法在beforeCreated生命周期事件中调用计算属性-计算属性当时根本不存在。（我知道它并不苗条-但在所有框架中，生命周期都是生命周期：）

onMount（）

确保为DOM渲染设置了所有内容（根据文档）。@FredHors所以，对于你的确切问题（

导出延迟

）-我不确定，我还需要使用Sevelte more。但问题是：

onMount（）。您的函数/变量可能在此事件之前可用，但您可能会遇到错误，因为这不是“确定的”。只需将
onMount（）
看作一个触发器，它让您知道组件已设置，数据/函数可访问，并且您可以使用这些组件。这有点像在那个事件中的一次回调。
<script>
  import { onMount } from "svelte";

  let canRender;

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

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


<script>
  let canRender;

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

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