Svelte store 的 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(...) 而不是创建局部常量（我并不真正关心响应式行为改变函数中返回值），我会遇到任何性能问题吗？如果商店的价值是一个非常大的对象呢？

Answer 1

来自Svelte documentation on 'get'：

Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. get allows you to do so.

并且（粗体表示强调）：

This works by creating a subscription, reading the value, then unsubscribing. It's therefore not recommended in hot code paths.

因此，从纯粹的性能角度来看，一旦您计划多次使用 get，您最好直接订阅商店 - 即直接访问值 $someStore 使用 shorthand 语法。但是，如果您对保持本地数据与商店更新同步不感兴趣，或者更糟的是，如果您特别不想，那么您的方法看起来非常好。

然而，在实践中，您可以简单地执行以下操作：

import { someStore } from './myStores';

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

并节省额外的进口费用。如果您不关心商店的价值是否变化，或者如果您想要跟上变化，那么您可以保存自己的分配并在中使用 $someStore代替 arr（或您将存储值分配给的任何变量）。

Svelte store 的 get 方法查找性能

Svelte store's get method lookup performance

svelte

svelte-component

svelte-store

sveltekit