` is removed) * `

cell

` 将导致 `

cell

`（`` 自动插入） ¥`

cell

` will result in `

cell

` (a `` is auto-inserted) 当组件在客户端上渲染时，此代码将起作用（这就是为什么这是一个警告而不是错误），但如果你使用服务器渲染，它将导致水合失败。 ¥This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail. ### non\_reactive\_update ``` `%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates ``` 当编译器检测到以下情况时，会抛出此警告： ¥This warning is thrown when the compiler detects the following: * 声明的变量没有 `$state` 或 `$state.raw` ¥a variable was declared without `$state` or `$state.raw` * 变量被重新分配 ¥the variable is reassigned * 变量在反应性上下文中读取 ¥the variable is read in a reactive context 在这种情况下，更改值将无法正确触发更新。示例： ¥In this case, changing the value will not correctly trigger updates. Example: ```svelte

This value updates: {reactive}

This value does not update: {stale}

{ stale = 'updated'; reactive = 'updated'; }}>update ``` 要解决此问题，请用 `$state` 封装变量声明。 ¥To fix this, wrap your variable declaration with `$state`. ### options\_deprecated\_accessors ``` The `accessors` option has been deprecated. It will have no effect in runes mode ``` ### options\_deprecated\_immutable ``` The `immutable` option has been deprecated. It will have no effect in runes mode ``` ### options\_missing\_custom\_element ``` The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option? ``` ### options\_removed\_enable\_sourcemap ``` The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them ``` ### options\_removed\_hydratable ``` The `hydratable` option has been removed. Svelte components are always hydratable now ``` ### options\_removed\_loop\_guard\_timeout ``` The `loopGuardTimeout` option has been removed ``` ### options\_renamed\_ssr\_dom ``` `generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively ``` ### perf\_avoid\_inline\_class ``` Avoid 'new class' — instead, declare the class at the top level scope ``` ### perf\_avoid\_nested\_class ``` Avoid declaring classes below the top level scope ``` ### reactive\_declaration\_invalid\_placement ``` Reactive declarations only exist at the top level of the instance script ``` ### reactive\_declaration\_module\_script\_dependency ``` Reassignments of module-level declarations will not cause reactive statements to update ``` ### script\_context\_deprecated ``` `context="module"` is deprecated, use the `module` attribute instead ``` ```svelte ``` ### script\_unknown\_attribute ``` Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it ``` ### slot\_element\_deprecated ``` Using `` to render parent content is deprecated. Use `{@render ...}` tags instead ``` 有关更多信息，请参阅 [迁移指南](v5-migration-guide#Snippets-instead-of-slots)。 ¥See [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more info. ### state\_referenced\_locally ``` This reference only captures the initial value of `%name%`. Did you mean to reference it inside a %type% instead? ``` 当编译器检测到以下情况时，会抛出此警告： ¥This warning is thrown when the compiler detects the following: * 声明了一个反应变量 ¥A reactive variable is declared * ...随后重新分配... ¥...and later reassigned... * ...并在同一作用域内引用 ¥...and referenced in the same scope 此 '破坏链接' 对应于原始状态声明。例如，如果你将状态传递给函数，则该函数在重新赋值后将失去对状态的访问权限： ¥This 'breaks the link' to the original state declaration. For example, if you pass the state to a function, the function loses access to the state once it is reassigned: ```svelte count++}> increment ``` ```svelte

The count is {count}

``` 要修复此问题，请引用变量，以便对其进行延迟评估。对于上述示例，可以通过将 `count` 封装在函数中来实现： ¥To fix this, reference the variable such that it is lazily evaluated. For the above example, this can be achieved by wrapping `count` in a function: ```svelte count++}> increment ``` ```svelte

The count is {+++count()+++}

``` 有关更多信息，请参阅 [将状态传递给函数]($state#Passing-state-into-functions)。 ¥For more info, see [Passing state into functions]($state#Passing-state-into-functions). ### store\_rune\_conflict ``` It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity ``` ### svelte\_component\_deprecated ``` `` is deprecated in runes mode — components are dynamic by default ``` 在以前版本的 Svelte 中，组件构造函数在渲染组件时已修复。换句话说，如果你希望 `` 在 `X` 更改时重新渲染，你要么必须使用 ``，要么将组件放在 `{#key X}...{/key}` 块内。 ¥In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `` to re-render when `X` changed, you would either have to use `` or put the component inside a `{#key X}...{/key}` block. 在 Svelte 5 中，这不再是事实 - 如果 `X` 发生变化，`` 会重新渲染。 ¥In Svelte 5 this is no longer true — if `X` changes, `` re-renders. 在某些情况下，可以使用 `` 语法作为替代；在 Svelte 5 中，具有属性访问的小写变量被识别为组件。 ¥In some cases `` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5. 对于复杂的组件解析逻辑，可能需要一个中间的大写变量。例如在可以使用 `@const` 的地方： ¥For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used: ```svelte {#each items as item} ------ +++{@const Component = item.condition ? Y : Z}+++ ++++++ {/each} ``` 派生值可用于其他上下文： ¥A derived value may be used in other contexts: ```svelte ------ ++++++ ``` ### svelte\_element\_invalid\_this ``` `this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte ``` ### svelte\_self\_deprecated ``` `` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead ``` 有关更多信息，请参阅 [文档中的注释](legacy-svelte-self)。 ¥See [the note in the docs](legacy-svelte-self) for more info. ### unknown\_code ``` `%code%` is not a recognised code ``` ``` `%code%` is not a recognised code (did you mean `%suggestion%`?) ``` # ‘运行时错误’ ## 客户端错误(Client errors) ¥Client errors ### async\_derived\_orphan ``` Cannot create a `$derived(...)` with an `await` expression outside of an effect tree ``` 在 Svelte 中，有两种响应类型 - [`$derived`](/docs/svelte/$derived) 和 [`$effect`](/docs/svelte/$effect)。派生类可以在任何地方创建，因为它们会延迟运行，并且如果没有引用它们，就可以是 [垃圾收集](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection)。相比之下，Effect 的依赖发生变化时，会持续积极运行，直到被销毁。 ¥In Svelte there are two types of reaction — [`$derived`](/docs/svelte/$derived) and [`$effect`](/docs/svelte/$effect). Deriveds can be created anywhere, because they run *lazily* and can be [garbage collected](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection) if nothing references them. Effects, by contrast, keep running eagerly whenever their dependencies change, until they are destroyed. 因此，effect 只能在其他 effect（或 [效果根](/docs/svelte/$effect#$effect.root)，例如首次挂载组件时创建的 effect）内部创建，以便 Svelte 知道何时销毁它们。 ¥Because of this, effects can only be created inside other effects (or [effect roots](/docs/svelte/$effect#$effect.root), such as the one that is created when you first mount a component) so that Svelte knows when to destroy them. 当派生函数包含 `await` 表达式时，会出现一些小技巧：由于等到读取 `{await getPromise()}` 后再调用 `getPromise` 为时已晚，因此我们使用 effect 来主动调用它，并在值可用时通知 Svelte。但由于我们使用了 effect，因此只能在另一个 effect 内部创建异步的派生类。 ¥Some sleight of hand occurs when a derived contains an `await` expression: Since waiting until we read `{await getPromise()}` to call `getPromise` would be too late, we use an effect to instead call it proactively, notifying Svelte when the value is available. But since we're using an effect, we can only create asynchronous deriveds inside another effect. ### bind\_invalid\_checkbox\_value ``` Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead ``` ### bind\_invalid\_export ``` Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`) ``` ### bind\_not\_bindable ``` A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()` ``` ### component\_api\_changed ``` Calling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5 ``` 请参阅 [迁移指南](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) 了解更多信息。 ¥See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information. ### component\_api\_invalid\_new ``` Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. ``` 请参阅 [迁移指南](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) 了解更多信息。 ¥See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information. ### derived\_references\_self ``` A derived value cannot reference itself recursively ``` ### each\_key\_duplicate ``` Keyed each block has duplicate key at indexes %a% and %b% ``` ``` Keyed each block has duplicate key `%value%` at indexes %a% and %b% ``` ### effect\_in\_teardown ``` `%rune%` cannot be used inside an effect cleanup function ``` ### effect\_in\_unowned\_derived ``` Effect cannot be created inside a `$derived` value that was not itself created inside an effect ``` ### effect\_orphan ``` `%rune%` can only be used inside an effect (e.g. during component initialisation) ``` ### effect\_pending\_outside\_reaction ``` `$effect.pending()` can only be called inside an effect or derived ``` ### effect\_update\_depth\_exceeded ``` Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state ``` 如果某个效果更新了它也依赖的某个状态，它将重新运行，可能形成循环： ¥If an effect updates some state that it also depends on, it will re-run, potentially in a loop: ```js let count = $state(0); $effect(() => { // this both reads and writes `count`, // so will run in an infinite loop count += 1; }); ``` （Svelte 会在浏览器标签页崩溃之前进行干预。） ¥(Svelte intervenes before this can crash your browser tab.) 这同样适用于数组突变，因为它们同时读取和写入数组： ¥The same applies to array mutations, since these both read and write to the array: ```js let array = $state(['hello']); $effect(() => { array.push('goodbye'); }); ``` 请注意，只要效果是 'settles'，它就可以重新运行： ¥Note that it's fine for an effect to re-run itself as long as it 'settles': ```js let array = ['a', 'b', 'c']; // ---cut--- $effect(() => { // this is okay, because sorting an already-sorted array // won't result in a mutation array.sort(); }); ``` 通常，遇到此问题时，所涉及的值不应该是状态（例如，如果你在效果中推送到 `logs` 数组，请将 `logs` 设置为普通数组而不是 `$state([])`）。在极少数情况下，你确实需要在效果（[你应该避免的情况]($effect#When-not-to-use-$effect)）中写入状态，你可以使用 [untrack](svelte#untrack) 读取状态，以避免将其添加为依赖。 ¥Often when encountering this issue, the value in question shouldn't be state (for example, if you are pushing to a `logs` array in an effect, make `logs` a normal array rather than `$state([])`). In the rare cases where you really *do* need to write to state in an effect — [which you should avoid]($effect#When-not-to-use-$effect) — you can read the state with [untrack](svelte#untrack) to avoid adding it as a dependency. ### flush\_sync\_in\_effect ``` Cannot use `flushSync` inside an effect ``` `flushSync()` 函数可用于同步刷新任何待处理的效果。如果效果当前正在刷新，则无法使用它 - 换句话说，你可以在状态更改后调用它，但不能在效果内部调用它。 ¥The `flushSync()` function can be used to flush any pending effects synchronously. It cannot be used if effects are currently being flushed — in other words, you can call it after a state change but *not* inside an effect. 此限制仅适用于使用 `experimental.async` 选项的情况，该选项在 Svelte 6 中默认启用。 ¥This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6. ### fork\_discarded ``` Cannot commit a fork that was already discarded ``` ### fork\_timing ``` Cannot create a fork inside an effect or when state changes are pending ``` ### get\_abort\_signal\_outside\_reaction ``` `getAbortSignal()` can only be called inside an effect or derived ``` ### hydratable\_missing\_but\_required ``` Expected to find a hydratable with key `%key%` during hydration, but did not. ``` 如果你在客户端渲染了一个服务器端未渲染的可水合对象，则可能会发生这种情况，这意味着在水合期间，它被迫回退到阻塞式运行其函数。这会降低性能，因为它会阻塞水合，直到异步工作完成。 ¥This can happen if you render a hydratable on the client that was not rendered on the server, and means that it was forced to fall back to running its function blockingly during hydration. This is bad for performance, as it blocks hydration until the asynchronous work completes. ```svelte ``` ### hydration\_failed ``` Failed to hydrate the application ``` ### invalid\_snippet ``` Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}` ``` ### lifecycle\_legacy\_only ``` `%name%(...)` cannot be used in runes mode ``` ### props\_invalid\_value ``` Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value ``` ### props\_rest\_readonly ``` Rest element properties of `$props()` such as `%property%` are readonly ``` ### rune\_outside\_svelte ``` The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files ``` ### set\_context\_after\_init ``` `setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression ``` 此限制仅适用于使用 `experimental.async` 选项的情况，该选项在 Svelte 6 中默认启用。 ¥This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6. ### state\_descriptors\_fixed ``` Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`. ``` ### state\_prototype\_fixed ``` Cannot set prototype of `$state` object ``` ### state\_unsafe\_mutation ``` Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state` ``` 当在评估 `$derived` 时更新状态时会发生此错误。你可能会在尝试一次 'derive' 两个状态时遇到它： ¥This error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go: ```svelte count++}>{count}

{count} is even: {even}

{count} is odd: {odd}

``` 这是被禁止的，因为它会引入不稳定性：如果在重新计算 `odd` 之前更新 `

{count} is even: {even}

`，则 `even` 将过时。在大多数情况下，解决方案是使所有内容都派生： ¥This is forbidden because it introduces instability: if `

{count} is even: {even}

` is updated before `odd` is recalculated, `even` will be stale. In most cases the solution is to make everything derived: ```js let count = 0; // ---cut--- let even = $derived(count % 2 === 0); let odd = $derived(!even); ``` 如果副作用不可避免，请改用 [`$effect`]($effect)。 ¥If side-effects are unavoidable, use [`$effect`]($effect) instead. ### svelte\_boundary\_reset\_onerror ``` A `` `reset` function cannot be called while an error is still being handled ``` 如果 [``](https://svelte.kfwddq.com/docs/svelte/svelte-boundary) 包含 `onerror` 函数，则它不能同步调用提供的 `reset` 函数，因为边界仍然处于损坏状态。通常情况下，`reset()` 会在错误解决后稍后调用。 ¥If a [``](https://svelte.kfwddq.com/docs/svelte/svelte-boundary) has an `onerror` function, it must not call the provided `reset` function synchronously since the boundary is still in a broken state. Typically, `reset()` is called later, once the error has been resolved. 如果可以在 `onerror` 回调中解决错误，则必须至少等待边界稳定后再调用 `reset()`，例如使用 [`tick`](https://svelte.kfwddq.com/docs/svelte/lifecycle-hooks#tick)： ¥If it's possible to resolve the error inside the `onerror` callback, you must at least wait for the boundary to settle before calling `reset()`, for example using [`tick`](https://svelte.kfwddq.com/docs/svelte/lifecycle-hooks#tick): ```svelte { fixTheError(); +++await tick();+++ reset(); }}> ``` ## 服务器错误(Server errors) ¥Server errors ### async\_local\_storage\_unavailable ``` The node API `AsyncLocalStorage` is not available, but is required to use async server rendering. ``` 某些平台需要配置标志才能启用此 API。请参阅你平台的文档。 ¥Some platforms require configuration flags to enable this API. Consult your platform's documentation. ### await\_invalid ``` Encountered asynchronous work while rendering synchronously. ``` 你（或你正在使用的框架）使用包含 `await` 表达式的组件调用了 [`render(...)`](svelte-server#render)。将 `render` 的结果作为 `await`，或者将 `await`（或包含它的组件）封装在带有 `pending` 代码片段的 [``](svelte-boundary) 中。 ¥You (or the framework you're using) called [`render(...)`](svelte-server#render) with a component containing an `await` expression. Either `await` the result of `render` or wrap the `await` (or the component containing it) in a [``](svelte-boundary) with a `pending` snippet. ### html\_deprecated ``` The `html` property of server render results has been deprecated. Use `body` instead. ``` ### hydratable\_clobbering ``` Attempted to set `hydratable` with key `%key%` twice with different values. %stack% ``` 当使用相同的键多次调用 `hydratable` 时，会发生此错误。为避免这种情况，你可以： ¥This error occurs when using `hydratable` multiple times with the same key. To avoid this, you can: * 确保所有使用相同键的调用都返回相同的值 ¥Ensure all invocations with the same key result in the same value * 更新密钥以确保两个实例的唯一性 ¥Update the keys to make both instances unique ```svelte ``` ### hydratable\_serialization\_failed ``` Failed to serialize `hydratable` data for key `%key%`. `hydratable` can serialize anything [`uneval` from `devalue`](https://npmjs.com/package/uneval) can, plus Promises. Cause: %stack% ``` ### lifecycle\_function\_unavailable ``` `%name%(...)` is not available on the server ``` 某些方法（如 `mount`）在服务器上下文中运行时无法调用。避免预调用它们，即不在渲染期间调用。 ¥Certain methods such as `mount` cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render. ### server\_context\_required ``` Could not resolve `render` context. ``` 某些函数（例如 `hydratable`）不能在 `render(...)` 调用之外调用，例如在模块的顶层调用。 ¥Certain functions such as `hydratable` cannot be invoked outside of a `render(...)` call, such as at the top level of a module. ## 共享错误(Shared errors) ¥Shared errors ### experimental\_async\_required ``` Cannot use `%name%(...)` unless the `experimental.async` compiler option is `true` ``` ### invalid\_default\_snippet ``` Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead ``` 此错误将在以下设置中抛出： ¥This error would be thrown in a setup like this: ```svelte {entry} ``` ```svelte

{#each items as item}
• {@render children(item)}
{/each}

``` 这里，`List.svelte` 正在使用 `{@render children(item)`，这意味着它期望 `Parent.svelte` 使用片段。相反，`Parent.svelte` 使用已弃用的 `let:` 指令。这种 API 组合不兼容，因此出现错误。 ¥Here, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error. ### invalid\_snippet\_arguments ``` A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}` ``` ### lifecycle\_outside\_component ``` `%name%(...)` can only be used during component initialisation ``` 某些生命周期方法只能在组件初始化期间使用。要修复此问题，请确保你在组件实例脚本的顶层内调用该方法。 ¥Certain lifecycle methods can only be used during component initialisation. To fix this, make sure you're invoking the method inside the *top level of the instance script* of your component. ```svelte click me ``` ### missing\_context ``` Context was not set in a parent component ``` [`createContext()`](svelte#createContext) 实用程序返回一对 `[get, set]` 函数。如果未使用 `set` 在父组件中设置上下文，`get` 将抛出错误。 ¥The [`createContext()`](svelte#createContext) utility returns a `[get, set]` pair of functions. `get` will throw an error if `set` was not used to set the context in a parent component. ### snippet\_without\_render\_tag ``` Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`. ``` 抛出此错误的组件将如下所示（`children` 未被渲染）： ¥A component throwing this error will look something like this (`children` is not being rendered): ```svelte {children} ``` ...或者像这样（父组件传递了一个代码片段，而预期的是一个非代码片段值）： ¥...or like this (a parent component is passing a snippet where a non-snippet value is expected): ```svelte {#snippet label()} Hi! {/snippet} ``` ```svelte

{label}

``` ### store\_invalid\_shape ``` `%name%` is not a store with a `subscribe` method ``` ### svelte\_element\_invalid\_this\_value ``` The `this` prop on `` must be a string, if defined ``` # ‘运行时警告’ ## 客户端警告(Client warnings) ¥Client warnings ### assignment\_value\_stale ``` Assignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour. ``` 假设这种情况…… ¥Given a case like this... ```svelte add

items: {JSON.stringify(object.items)}

``` ...首次单击按钮时推送到的数组是分配右侧的 `[]`，但 `object.array` 的结果值是空状态代理。因此，推送的值将被丢弃。 ¥...the array being pushed to when the button is first clicked is the `[]` on the right-hand side of the assignment, but the resulting value of `object.array` is an empty state proxy. As a result, the pushed value will be discarded. 你可以通过将其分成两个语句来解决这个问题： ¥You can fix this by separating it into two statements: ```js let object = { array: [0] }; // ---cut--- function add() { object.array ??= []; object.array.push(object.array.length); } ``` ### await\_reactivity\_loss ``` Detected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await` ``` Svelte 基于信号的反应式工作方式是跟踪模板或 `$derived(...)` 表达式执行时读取的状态位。如果表达式包含 `await`，Svelte 会对其进行转换，以便跟踪 `await` 之后的任何状态 - 换句话说，在这种情况下…… ¥Svelte's signal-based reactivity works by tracking which bits of state are read when a template or `$derived(...)` expression executes. If an expression contains an `await`, Svelte transforms it such that any state *after* the `await` is also tracked — in other words, in a case like this... ```js let a = Promise.resolve(1); let b = 2; // ---cut--- let total = $derived(await a + b); ``` ...`a` 和 `b` 都会被跟踪，即使在初次执行后，只有在 `a` 解析后才会读取 `b`。 ¥...both `a` and `b` are tracked, even though `b` is only read once `a` has resolved, after the initial execution. 这不适用于表达式中非 'visible' 的 `await`。在这种情况下... ¥This does *not* apply to an `await` that is not 'visible' inside the expression. In a case like this... ```js let a = Promise.resolve(1); let b = 2; // ---cut--- async function sum() { return await a + b; } let total = $derived(await sum()); ``` ...`total` 将依赖于 `a`（会立即读取），但不依赖于 `b`（不会立即读取）。解决方案是将值传递给函数： ¥...`total` will depend on `a` (which is read immediately) but not `b` (which is not). The solution is to pass the values into the function: ```js let a = Promise.resolve(1); let b = 2; // ---cut--- /** * @param {Promise} a * @param {number} b */ async function sum(a, b) { return await a + b; } let total = $derived(await sum(a, b)); ``` ### await\_waterfall ``` An async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app ``` 在这种情况下... ¥In a case like this... ```js async function one() { return 1 } async function two() { return 2 } // ---cut--- let a = $derived(await one()); let b = $derived(await two()); ``` ...第二个 `$derived` 直到第一个 `$derived` 解析后才会被创建。由于 `await two()` 不依赖于 `a` 的值，因此这种延迟（通常称为 'waterfall'）是不必要的。 ¥...the second `$derived` will not be created until the first one has resolved. Since `await two()` does not depend on the value of `a`, this delay, often described as a 'waterfall', is unnecessary. （请注意，如果 `await one()` 和 `await two()` 的值随后发生变化，它们可以同时发生 - 瀑布流仅在派生函数首次创建时发生。） ¥(Note that if the values of `await one()` and `await two()` subsequently change, they can do so concurrently — the waterfall only occurs when the deriveds are first created.) 你可以通过先创建 Promise 然后等待它们来解决这个问题： ¥You can solve this by creating the promises first and *then* awaiting them: ```js async function one() { return 1 } async function two() { return 2 } // ---cut--- let aPromise = $derived(one()); let bPromise = $derived(two()); let a = $derived(await aPromise); let b = $derived(await bPromise); ``` ### binding\_property\_non\_reactive ``` `%binding%` is binding to a non-reactive property ``` ``` `%binding%` (%location%) is binding to a non-reactive property ``` ### console\_log\_state ``` Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead ``` 记录 [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 时，浏览器 devtools 将记录代理本身而不是它所代表的值。在 Svelte 的情况下，`$state` 代理的 'target' 可能与其当前值不相似，这可能会造成混淆。 ¥When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing. 记录随时间变化的值的最简单方法是使用 [`$inspect`](/docs/svelte/$inspect) 符文。或者，要一次性记录内容（例如，在事件处理程序内部），你可以使用 [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) 获取当前值的快照。 ¥The easiest way to log a value as it changes over time is to use the [`$inspect`](/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value. ### event\_handler\_invalid ``` %handler% should be a function. Did you mean to %suggestion%? ``` ### hydratable\_missing\_but\_expected ``` Expected to find a hydratable with key `%key%` during hydration, but did not. ``` 如果你在客户端渲染了一个服务器端未渲染的可水合对象，则可能会发生这种情况，这意味着在水合期间，它被迫回退到阻塞式运行其函数。这会降低性能，因为它会阻塞水合，直到异步工作完成。 ¥This can happen if you render a hydratable on the client that was not rendered on the server, and means that it was forced to fall back to running its function blockingly during hydration. This is bad for performance, as it blocks hydration until the asynchronous work completes. ```svelte ``` ### hydration\_attribute\_changed ``` The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value ``` `` 元素上的某些属性（如 `src`）在水化期间不会被修复，即服务器值将被保留。这是因为更新这些属性可能会导致重新获取图片（或者在 `