在Svelte中,您可以使用`array = array`将数组标记为需要在视图中刷新吗?

问题描述 投票:0回答:1

即,使用

array = array;

要触发视图以当前array刷新吗?

例如,以下用途

cards = [...cards, {name}];

“将”条目“添加”到数组cards,但是通过将cards分配给新数组,视图中的cards将被刷新。

样本:https://svelte.dev/repl/3ed20e7bac2e4b65944c98485d9217b3?version=3.18.1(只需输入一些名称,下面的列表就会更新)。

但是,当输入n名称时,这是O(n²),因为每次创建一个新数组都是O(n)。如果(1)希望用户一次输入几个或十几个名称,这不是什么大问题,或者(2)用户可以输入一个名称几秒钟至20秒,那么任何延迟当条目最多包含1000个或2000个名称时,UI持续0.2秒并不是一个大问题。 (无论如何,断电的情况下,用户最好将其添加到服务器和数据库中。)

但是如果我们不想要O(n²)时间,我们也可以使用:

    cards.push({name});
    cards = cards;

这将触发视图刷新。所以斯维尔特不做“脏物检查”吗?与Angular,Vue和React相比,它们确实通过将数组实际转换为字符串并检查数组是否已更改来进行脏检查吗?

样本:https://svelte.dev/repl/70cc3b08f6864ef387c691b8f126a7fd?version=3.18.1

没有cards = cards;行,列表将不会在视图中更新:

样本:https://svelte.dev/repl/25f41c51798d425e805fb4586a843363?version=3.18.1

所以Svelte实际上并不进行脏检查,而是使用cards = something;作为cards更改的提示,即使cards = cards也已更改?因此,如果我们使用array.push(),我们是否可以仅将此作为一般技术将某些内容标记为脏内容,以便程序运行更快? Svelte可以通过检测是否存在cards语句来实际猜测cards.push()已更改吗?

更新:发现通过向每个列表项添加密钥,不需要cards = cards,我想知道为什么:

https://svelte.dev/repl/d78158ae54684bf28b8c2e9b527f1915?version=3.18.1

<ul>
    {#each cards as card, i (i)}
    <li>{card.name}</li>
  {/each}
</ul>
view svelte dirty-checking
1个回答
0
投票

您可以使用自定义存储来模拟“检测由push()方法引起的更改”。

请参阅Rich Harris撰写的REPLhttps://svelte.dev/repl/2699eb0fe7dd4621b3e585aec1a30d01?version=3.17.3

© www.soinside.com 2019 - 2024. All rights reserved.