Svelte：现在可以覆写 `$derived` 了

Svelte: $derived can now be overwritten

Source | HN Comments

文章讨论了在 Svelte 中覆写 `$derived` 的问题。核心是允许修改 `$derived` 的值，并给出了一个示例，说明了在用户界面中立即更新点赞计数，同时异步更新服务器端数据的情况。讨论还涉及了该功能可能带来的问题，例如与服务器数据同步的复杂性，以及对未来优化的潜在影响。

Conversation

这个文件包含双向 Unicode 文本，这些文本可能会以不同于下面的方式被解释或编译。为了审查，请在编辑器中打开该文件以显示隐藏的 Unicode 字符。了解更多关于双向 Unicode 字符的信息 [ 显示隐藏字符 ](https://github.com/sveltejs/svelte/pull/<{{ revealButtonHref }}>)

复制链接

@Rich-Harris Rich-Harris 评论于 Mar 21, 2025 • 已编辑加载中

参见 sveltejs/cli#487 (comment) ，了解为什么这很有用。

文档：https://svelte.dev/docs/svelte/$derived#Overriding-derived-values

在提交 PR 之前，请确保您执行以下操作

如果您的 PR 引用了事先讨论过的问题，那将非常有用。在许多情况下，功能缺失是有原因的。对于较大的更改，请创建一个 RFC：https://github.com/sveltejs/rfcs
在您的 PR 标题前加上 feat:、fix:、chore: 或 docs:。
此消息正文应清楚地说明它解决了什么问题。
理想情况下，包含一个没有此 PR 会失败但有此 PR 会通过的测试。
如果此 PR 更改了 packages/svelte/src 中的代码，请添加一个 changeset（npx changeset）。

测试和 linting

使用 pnpm test 运行测试，并使用 pnpm lint 检查项目。

抱歉，出了点问题。 👍 24 Ocean-OS, max-got, frederikhors, Jerboas86, GauBen, eikaramba, wiesson, Thiagolino8, theodorejb, levibassey, 以及其他 14 人对竖起大拇指的表情符号做出了反应 🎉 20 henrykrinkle01, max-got, frederikhors, GauBen, brunnerh, siddarthvader, wiesson, theodorejb, levibassey, mquandalle, 以及其他 10 人对欢呼表情符号做出了反应 🚀 14 SymphonySimper, GauBen, wiesson, theodorejb, levibassey, mquandalle, unlocomqx, Azarattum, pitzzahh, rChaoz, 以及其他 4 人对火箭表情符号做出了反应所有反应

👍 24 个反应
🎉 20 个反应
🚀 14 个反应

feat: make deriveds writable[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/d3008e75e924cdf156c4dd628f2888522cc376df> "feat: make deriveds writable") d3008e7[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/d3008e75e924cdf156c4dd628f2888522cc376df>) 复制链接

changeset-bot bot 评论于 Mar 21, 2025 • 已编辑加载中

🦋 Changeset detected

Latest commit: b5fed42 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package | Name | Type ---|--- svelte | Minor Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR 所有反应抱歉，出了点问题。复制链接

svelte-docs-bot bot 评论于 Mar 21, 2025

Preview: https://svelte-dev-git-preview-svelte-15570-svelte.vercel.app/

所有反应抱歉，出了点问题。复制链接 Contributor

github-actions bot 评论于 Mar 21, 2025

Playground

pnpm add https://pkg.pr.new/svelte@15570

所有反应抱歉，出了点问题。 dummdidumm 审核了 Mar 21, 2025

View reviewed changes documentation/docs/02-runes/03-$derived.md 已过期 Show resolved Hide resolved Rich-Harris 添加了 2 个提交 March 21, 2025 10:05 add optimistic UI example[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/374729a420cf1e368dd8c7241a77a6588c40789c> "add optimistic UI example") 374729a[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/374729a420cf1e368dd8c7241a77a6588c40789c>) add note to when-not-to-use-effect[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/9f5df6fa47e09180d3a2bc8814c990c5db3b3289> "add note to when-not-to-use-effect") 9f5df6f[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/9f5df6fa47e09180d3a2bc8814c990c5db3b3289>) paoloricciuti 提到了这个 pull request Mar 21, 2025 Infinite recursion in $effect #15568 已关闭 benmccann 审核了 Mar 21, 2025

View reviewed changes documentation/docs/02-runes/03-$derived.md 已过期 Show resolved Hide resolved Rich-Harris 添加了 5 个提交 March 21, 2025 11:18 add section on deep reactivity[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/43376e74a00f9ef5e7cdf8ca9348fc8470799c60> "add section on deep reactivity") 43376e7[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/43376e74a00f9ef5e7cdf8ca9348fc8470799c60>) root-relative URL[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/dccc34da62e2d81d1d2dd4adee347f9bd2311374> "root-relative URL") dccc34d[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/dccc34da62e2d81d1d2dd4adee347f9bd2311374>) use hash URL[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/ea6b1e364ed0ad4283486df9f5274ff2ef54ac41> "use hash URL") ea6b1e3[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/ea6b1e364ed0ad4283486df9f5274ff2ef54ac41>) mention const[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/64e33e8ffaca960824d173ce1d7b5de799d47d7d> "mention const") 64e33e8[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/64e33e8ffaca960824d173ce1d7b5de799d47d7d>) make handler async, move into script block[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/b5fed42a3aeb297bd82c48b6e1b70cd0fbc74256> "make handler async, move into script block") b5fed42[](https://github.com/sveltejs/svelte/pull/</sveltejs/svelte/pull/15570/commits/b5fed42a3aeb297bd82c48b6e1b70cd0fbc74256>) dummdidumm 批准了这些更改 Mar 21, 2025

View reviewed changes Hide details View details Rich-Harris 合并了 commit 5a8fa69 到 main Mar 21, 2025 13 checks passed Rich-Harris 删除了 writable-deriveds 分支 March 21, 2025 16:54 github-actions bot 提到了这个 pull request Mar 21, 2025 Version Packages #15578 已合并 This was referenced Mar 21, 2025 docs: address $effect feedback #15107 已合并 Svelte 5: Bring back $state.link #13452 已关闭 Svelte 5: can't link reactivity from $props() #14536 已关闭 Update to Svelte 5.25.0 and update "Sverdle" demo to use writable derived sveltejs/cli#487 已关闭复制链接

mdnahas 评论于 Mar 21, 2025

该问题已关闭，但我想为未来的读者添加一个注释。我是 Svelte 5 的新手，但我认为使 derived 可写违反了用户的期望，并会阻止未来的优化（编译时和运行时）。这来自于将 derived 视为数据流网络中的内部节点。

所有反应抱歉，出了点问题。复制链接 Contributor

7nik 评论于 Mar 21, 2025

您可以始终将变量定义为 const，它将是只读的。此外，derives 始终是并且仍然是可变的：

let count = $state(0);
const double = $derived({ v: count*2 });
double.v = 42;

从思维上讲，这与可写 derived 没有太大区别。

👍 5 hyunbinseo, mustofa-id, adwidianjaya, Zxce3, and svenissimo reacted with thumbs up emoji 所有反应

👍 5 reactions

抱歉，出了点问题。复制链接

oxisto 评论于 Mar 21, 2025 • 已编辑加载中

此解决方案有更多问题，并且不能完全解决提到的问题，尤其是 #14536 与 (sveltejs/kit#12568) 结合使用时。由于服务器数据不是完全反应式的，因此该解决方案不会更新从服务器获取的数据项中的嵌套属性的状态，而丑陋的解决方法

let { data } = $props();
let myData = $derived(data.myData);
$effect(() => {
 myData = data.myData;
});

（或类似的建议解决方法）也将更新 `myData` 的嵌套属性。主要用例是从服务器获取某些内容，让用户对其进行编辑并将其发回。

👍 1 brandonp-ais reacted with thumbs up emoji 所有反应

👍 1 reaction

抱歉，出了点问题。复制链接

brandonp-ais 评论于 Mar 21, 2025

此解决方案有更多问题，并且不能完全解决提到的问题，尤其是 #14536 与 (sveltejs/kit#12568) 结合使用时。由于服务器数据不是完全反应式的，因此该解决方案不会更新从服务器获取的数据项中的嵌套属性的状态，而丑陋的解决方法
let { data } = $props();
let myData = $derived(data.myData);
$effect(() => {
 myData = data.myData;
});
（或类似的建议解决方法）也将更新 myData 的嵌套属性。主要用例是从服务器获取某些内容，让用户对其进行编辑并将其发回。

我还没有测试过 SvelteKit 以及它如何与 `data` prop 一起工作，但它解决了我们从 4 迁移到 5 时代码库中遇到的一个常见问题。这是更新后的 REPL，其中注释掉了使用 @paoloricciuti 之前提供的解决方法。https://svelte.dev/playground/10615e463dfd4620bb97c11ae9d7394e?version=5.25.1

所有反应抱歉，出了点问题。复制链接 Contributor

hyunbinseo 评论于 Mar 22, 2025

可以更新 PR 描述吗？我认为文档示例更能直观地解释为什么这很有用。 https://svelte.dev/docs/svelte/$derived#Overriding-derived-values

<script>
 let { post, like } = $props();
 let likes = $derived(post.likes);
 async function onclick() {
  // increment the `likes` count immediately...
  likes += 1;
  // and tell the server, which will eventually update `post`
  try {
   await like();
  } catch {
   // failed! roll back the change
   likes -= 1;
  }
 }
</script>
<button {onclick}>🧡 {likes}</button>

所有反应抱歉，出了点问题。复制链接 Member Author