Svelte 商店的 get 方法查找性能

Question

我有一个 Svelte 应用程序，其中大部分数据逻辑都被提取到定义自定义商店的文件中。通常，我需要编写一个重复使用相同存储值的函数：

import { get } from 'svelte/store';
import { someStore } from './myStores';

function foo(): void {
   const arr: string[] = get(someStore);
   // ...lots of operations using arr
}

我目前的做法是，如果我只需要一次 someStore 的值，我将只使用 get(someStore) 内联，但如果我在该函数中至少需要两次，我会将它分配给一个局部变量像上面一样。这是因为我不确定一遍又一遍地调用get 是否会影响性能。

了解 Svelte 商店如何实施的人是否对这是否真的有必要有任何直觉？如果我将代码简化为在任何地方都使用get(...) 而不是创建局部常量，我是否会遇到任何性能问题（我并不真正关心改变返回值中间函数的反应行为）？如果 store 的 value 是一个很大的对象呢？

Answer 1

来自Svelte documentation on 'get'：

通常，您应该通过订阅来读取商店的价值 并使用随时间变化的值。偶尔，你可能 需要检索您未订阅的商店的值。 get 允许你这样做。

和（加粗表示强调）：

这是通过创建订阅、读取值然后取消订阅来实现的。因此不建议在热代码路径中使用。

因此，从纯粹的性能角度来看，一旦您计划多次使用get，您最好简单地订阅商店——这意味着使用速记语法直接以$someStore 访问该值。但是，如果您不想让本地数据与商店更新同步，或者更糟糕的是，如果您特别不想要这样做，那么您的方法看起来非常好。

但是，实际上，您可以简单地这样做：

import { someStore } from './myStores';

function foo(): void {
   const arr: string[] = $someStore;
   // ...lots of operations using arr
}

并为自己节省额外的导入。如果您不关心 store 的值是否发生变化，或者如果您想要跟上变化，那么您可以保存分配并使用 $someStore 代替 arr （或您将存储值分配给的任何变量）。