重新创建一个组件？答案

【问题标题】：Recreate a component?重新创建一个组件？
【发布时间】：2018-08-01 08:45:55
【问题描述】：

有没有办法在 Svelte 中重新创建组件？

上下文是我有一个已经创建的组件。一旦它完成它的过程，我希望它被销毁然后再次创建。这会将其属性恢复为默认状态，并确保对其嵌套组件执行相同操作。

我想这在技术上使用现有的组件方法是可行的，但我想知道是否有一种直接的方法来实现它。

顺便说一句，我知道在某些情况下重新创建组件可能效率低下。最好通过手动重置组件及其嵌套组件的状态来实现所需的重新创建效果。例如，递归函数可以以某种方式遍历组件及其嵌套组件，并调用每个组件的默认数据函数。然而，这并不是那么简单，并且存在一些问题（即计算属性和创建生命周期挂钩）。

【问题讨论】：

标签： svelte

【解决方案1】：

简短的回答是否定的，要重新创建处于出厂状态的组件，您需要再次调用 new Thing(...)。

【讨论】：

感谢您的回复。您认为为此目的使用像recreate 这样的组件方法可能有什么好处吗？也许这个问题适合在 GitHub 存储库中讨论。
GitHub 将是进行讨论的地方，是的——我的直觉是它可能没那么有用，因为所有 recreate 逻辑可能不会比重新实例化便宜，但我可以误解或遗漏了什么！

【解决方案2】：

是，使用{#key} 块：

<script>
import YourComponent from "./YourComponent.svelte"

let unique = {}

function restart() {
  unique = {} // every {} is unique, {} === {} evaluates to false
}
</script>

{#key unique}
  <YourComponent />
{/key}

<button on:click={restart}>Restart</button>

REPL

{#key} 是在 Svelte v3.28 中引入的，在此之前您需要使用键控 {#each} 块 with only one item

【讨论】：