Svelte 提供了各种内置函数的响应式版本，如[`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)、[`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)和[`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL)，它们可以像它们的原生版本一样使用，同时还提供了一些额外的处理响应式的实用工具。

```js
// @noErrors
import {
	MediaQuery,
	SvelteDate,
	SvelteMap,
	SvelteSet,
	SvelteURL,
	SvelteURLSearchParams,
	createSubscriber
} from 'svelte/reactivity';
```

## 
媒体查询

> 自 5.7.0 版本起可用

创建一个媒体查询并提供一个 `当前` 属性，该属性反映是否匹配。

请谨慎使用它——在服务器端渲染期间，无法知道正确的值应该是什么，这可能会导致内容在激活时发生变化。如果您可以使用 CSS 中的媒体查询达到相同的效果，请这样做。

```svelte
<script>
	import { MediaQuery } from 'svelte/reactivity';

	const large = new MediaQuery('min-width: 800px');
</script>

<h1>{large.current ? 'large screen' : 'small screen'}</h1>
```

```dts
class MediaQuery extends ReactiveValue<boolean> {/*…*/}
```

```dts
constructor(query: string, fallback?: boolean | undefined);
```

*   `查询` 媒体查询字符串
*   `后备` 服务器后备值

## SvelteDate

一个内置的 [`日期`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) 对象的响应式版本。读取日期（无论是使用 `date.getTime()` 或 `date.toString()` 等方法，还是通过 [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) 等方式），在 [效果](/docs/svelte/$effect) 或 [派生](/docs/svelte/$derived) 中将导致在日期值变化时重新评估。

```svelte
<script>
	import { SvelteDate } from 'svelte/reactivity';

	const date = new SvelteDate();

	const formatter = new Intl.DateTimeFormat(undefined, {
	  hour: 'numeric',
	  minute: 'numeric',
	  second: 'numeric'
	});

	$effect(() => {
		const interval = setInterval(() => {
			date.setTime(Date.now());
		}, 1000);

		return () => {
			clearInterval(interval);
		};
	});
</script>

<p>The time is {formatter.format(date)}</p>
```

```dts
class SvelteDate extends Date {/*…*/}
```

```dts
constructor(...params: any[]);
```

## SvelteMap

一个内置的 [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) 对象的响应式版本。通过迭代或通过读取 `map.size` 或调用 `map.get(...)` 或 `map.has(...)`（如下面的 [井字棋示例](/playground/0b0ff4aa49c9443f9b47fe5203c78293) 所示）来读取映射的内容，在 [效果](/docs/svelte/$effect) 或 [派生](/docs/svelte/$derived) 中将导致在映射更新时按需重新评估。

请注意，在响应式映射中的值 *不是* 深度响应的 [deeply reactive](/docs/svelte/$state#Deep-state)。

```svelte
<script>
	import { SvelteMap } from 'svelte/reactivity';
	import { result } from './game.js';

	let board = new SvelteMap();
	let player = $state('x');
	let winner = $derived(result(board));

	function reset() {
		player = 'x';
		board.clear();
	}
</script>

<div class="board">
	{#each Array(9), i}
		<button
			disabled={board.has(i) || winner}
			onclick={() => {
				board.set(i, player);
				player = player === 'x' ? 'o' : 'x';
			}}
		>{board.get(i)}</button>
	{/each}
</div>

{#if winner}
	<p>{winner} wins!</p>
	<button onclick={reset}>reset</button>
{:else}
	<p>{player} is next</p>
{/if}
```

```dts
class SvelteMap<K, V> extends Map<K, V> {/*…*/}
```

```dts
constructor(value?: Iterable<readonly [K, V]> | null | undefined);
```

`set(键: K, 值: V): this;`

## SvelteSet

一个内置的 [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) 对象的响应式版本。通过迭代或通过读取 `set.size` 或调用 `set.has(...)`（如下面的 [示例](/playground/53438b51194b4882bcc18cddf9f96f15) 所示）来读取集合的内容，在 [效果](/docs/svelte/$effect) 或 [派生](/docs/svelte/$derived) 中将导致在集合更新时根据需要重新评估。

请注意，反应集合中的值 *不是* 深度反应的 [deeply reactive](/docs/svelte/$state#Deep-state)。

```svelte
<script>
	import { SvelteSet } from 'svelte/reactivity';
	let monkeys = new SvelteSet();

	function toggle(monkey) {
		if (monkeys.has(monkey)) {
			monkeys.delete(monkey);
		} else {
			monkeys.add(monkey);
		}
	}
</script>

{#each ['🙈', '🙉', '🙊'] as monkey}
	<button onclick={() => toggle(monkey)}>{monkey}</button>
{/each}

<button onclick={() => monkeys.clear()}>clear</button>

{#if monkeys.has('🙈')}<p>see no evil</p>{/if}
{#if monkeys.has('🙉')}<p>hear no evil</p>{/if}
{#if monkeys.has('🙊')}<p>speak no evil</p>{/if}
```

```dts
class SvelteSet<T> extends Set<T> {/*…*/}
```

```dts
constructor(value?: Iterable<T> | null | undefined);
```

`add(值: T): this;`

## SvelteURL

一个内置的[`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL)对象的响应式版本。在[效果](/docs/svelte/$effect)或[派生](/docs/svelte/$derived)中读取 URL 的属性（如`url.href`或`url.pathname`）时，如果 URL 发生变化，它将根据需要重新评估。

The `searchParams` 属性是 [SvelteURLSearchParams](/docs/svelte/svelte-reactivity#SvelteURLSearchParams) 的一个实例。

[示例](/playground/5a694758901b448c83dc40dc31c71f2a)：

```svelte
<script>
	import { SvelteURL } from 'svelte/reactivity';

	const url = new SvelteURL('https://example.com/path');
</script>

<!-- changes to these... -->
<input bind:value={url.protocol} />
<input bind:value={url.hostname} />
<input bind:value={url.pathname} />

<hr />

<!-- will update `href` and vice versa -->
<input bind:value={url.href} size="65" />
```

```dts
class SvelteURL extends URL {/*…*/}
```

```dts
get searchParams(): SvelteURLSearchParams;
```

## SvelteURLSearchParams

一个内置的 [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) 对象的响应式版本。通过迭代或调用 `params.get(...)` 或 `params.getAll(...)`（如下面的 [示例](/playground/b3926c86c5384bab9f2cf993bc08c1c8) 所示）读取其内容，在 [效果](/docs/svelte/$effect) 或 [派生](/docs/svelte/$derived) 中将根据参数的更新必要时重新评估。

```svelte
<script>
	import { SvelteURLSearchParams } from 'svelte/reactivity';

	const params = new SvelteURLSearchParams('message=hello');

	let key = $state('key');
	let value = $state('value');
</script>

<input bind:value={key} />
<input bind:value={value} />
<button onclick={() => params.append(key, value)}>append</button>

<p>?{params.toString()}</p>

{#each params as [key, value]}
	<p>{key}: {value}</p>
{/each}
```

```dts
class SvelteURLSearchParams extends URLSearchParams {/*…*/}
```

```dts
[REPLACE](params: URLSearchParams): void;
```

## 
创建订阅者

> 自 5.7.0 版本起可用

返回一个将外部基于事件的系统与 Svelte 的响应性集成的`subscribe`函数。它特别适用于与 Web API 如`MediaQuery`、`IntersectionObserver`或`WebSocket`集成。

如果在内联（包括间接地，例如在 getter 中）调用 `subscribe`，则将使用 `update` 函数调用 `start` 回调。每当调用 `update` 时，效果将重新运行。

如果`start`返回一个清理函数，则在效果被销毁时将调用该函数。

如果在一个或多个效果中调用 `subscribe`，只要效果处于活动状态，`start` 将只会被调用一次，并且当所有效果被销毁时，返回的 teardown 函数才会被调用。

以示例来理解最为直观。以下是对[`MediaQuery`](/docs/svelte/svelte-reactivity#MediaQuery)的一个实现：

```js
// @errors: 7031
import { createSubscriber } from 'svelte/reactivity';
import { on } from 'svelte/events';

export class MediaQuery {
	#query;
	#subscribe;

	constructor(query) {
		this.#query = window.matchMedia(`(${query})`);

		this.#subscribe = createSubscriber((update) => {
			// when the `change` event occurs, re-run any effects that read `this.current`
			const off = on(this.#query, 'change', update);

			// stop listening when all the effects are destroyed
			return () => off();
		});
	}

	get current() {
		// This makes the getter reactive, if read in an effect
		this.#subscribe();

		// Return the current state of the query, whether or not we're in an effect
		return this.#query.matches;
	}
}
```

```dts
function createSubscriber(
	start: (update: () => void) => (() => void) | void
): () => void;
```