svelte - 组件差异

Question

这个问题可能是一个简单的问题。

假设以下 Svelte 组件：

{#if condition}
  <A>
{:else}
  <B>
{/if}

其中 A 和 B 是其他 Svelte 组件。问题是：

• B与 A 有手术差异吗？
• A 完全被 B 取代了吗？

出现此问题的用例有两个：

• 如前所示，可以使用分支来实现穷人路由。当路由组件足够相似时，最小化它们之间的更新是很有趣的
• 我有一个案例，其中 B 是 A，但我不确定是让编译器完成它的工作还是使用带有额外参数的父组件来编码 A 和 B 之间的变化：

...
...
{#if condition}
  ... The A-only part
{/if}
...
{#if other condition}
 ... The B-only part
{/if}
...

Answer 1

与虚拟 DOM 算法一样，A 完全替换为 B。这部分是为了简单，也是为了正确性——A 和 B 在概念上是不同的，即使它们具有相似的结构，所以重要的是新组件不继承旧 DOM 中的任何状态（正在进行的 CSS 动画，焦点状态等）。'Surgical' 适用于组件内的状态更改。