重新创建一个组件？

Question

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

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

我想这在技术上可以通过现有的组件方法实现，但我想知道是否有一种简单的方法来实现它。

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

Answer 1

是的，使用{#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}带键块