Svelte参考

运行时警告

客户端警告

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.

假设有如下情况...

<script>
	let object = $state({ array: null });

	function add() {
		(object.array ??= []).push(object.array.length);
	}
</script>

<button onclick={add}>add</button>
<p>items: {JSON.stringify(object.items)}</p>

...当第一次点击按钮时推送到数组的是赋值右侧的 []，但 object.array 的结果值是一个空的代理状态。因此，推入的值将被丢弃。

可以通过将其分成两个语句来解决此问题

function function add(): voidadd() {
	let object: {
    array: number[];
}object.array: number[]array ??= [];
	let object: {
    array: number[];
}object.array: number[]array.Array<number>.push(...items: number[]): numberAppends new elements to the end of an array, and returns the new length of the array.
@paramitems New elements to add to the array.push(let object: {
    array: number[];
}object.array: number[]array.Array<number>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.
length);
}

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

在记录代理时，浏览器开发者工具将记录代理本身而不是它代表的值。在 Svelte 的情况下，$state 代理的“目标”可能与其当前值不一致，这可能会令人困惑。

随着时间的推移，记录值变化的最简单方法是使用 $inspect 符文。或者，要偶尔记录内容（例如，在事件处理程序内部），可以使用 $state.snapshot 对当前值进行快照。

event_handler_invalid

%handler% should be a function. Did you mean to %suggestion%?

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

hydration_html_changed

The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value

The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value

hydration_mismatch

Hydration failed because the initial UI does not match what was rendered on the server

Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%

invalid_raw_snippet_render

The `render` function passed to `createRawSnippet` should return HTML for a single element

legacy_recursive_reactive_block

Detected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.

lifecycle_double_unmount

Tried to unmount a component that was not mounted

ownership_invalid_binding

%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%

ownership_invalid_mutation

Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead

%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead

reactive_declaration_non_reactive_property

A `$:` statement (%location%) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode

在旧版模式下，$: 反应式语句在其引用的状态发生变化时重新运行。这是在编译时通过分析代码确定的。

在符文模式下，当函数的执行期间读取的值发生变化时，效果和派生值会重新运行。

通常，结果是相同的——例如，这些可以被认为是等效的

$: let sum: numbersum = let a: numbera + let b: numberb;

const const sum: numbersum = function $derived<number>(expression: number): number
namespace $derivedDeclares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
https://svelte.js.cn/docs/svelte/$derived
@paramexpression The derived state expression$derived(let a: numbera + let b: numberb);

在某些情况下——例如触发上述警告的情况——它们并不相同

const const add: () => numberadd = () => let a: numbera + let b: numberb;

// the compiler can't 'see' that `sum` depends on `a` and `b`, but
// they _would_ be read while executing the `$derived` version
$: let sum: numbersum = const add: () => numberadd();

类似地，深度状态的反应式属性对编译器不可见。因此，这些属性的变化将导致效果和派生值重新运行，但不会导致 $: 语句重新运行。

当你将此组件迁移到符文模式时，行为将相应地发生变化。

state_proxy_equality_mismatch

Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results

$state(...) 会创建传递给它的值的代理。代理和值具有不同的标识，这意味着相等性检查将始终返回 false

<script>
	let value = { foo: 'bar' };
	let proxy = $state(value);

	value === proxy; // always false
</script>

要解决此问题，请确保在两个值都使用 $state(...) 创建或都不使用的情况下比较值。请注意，$state.raw(...) 不会创建代理状态。

共享警告

dynamic_void_element_content

`<svelte:element this="%tag%">` is a void element — it cannot have content

state_snapshot_uncloneable

Value cannot be cloned with `$state.snapshot` — the original value was returned

The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:

%properties%

在 GitHub 上编辑此页面

运行时错误概述