Svelte 5中如何实现依赖其他Props的默认值解构？

在Svelte 5里，直接通过解构$props()设置依赖其他Props的默认值（比如bar依赖foo）会出现不生效或无法响应更新的问题，你可以用以下两种方式解决：

1. 基础场景（Props无需动态更新） #

先解构出foo并设置默认值，再单独处理bar的默认值，确保bar能基于已确定的foo值计算：

// 先解构foo，设置默认值42
let { foo = 42 } = $props();
// 优先使用传入的bar，没有则用当前foo+1作为默认值
let bar = $props().bar ?? (foo + 1);

2. 响应式场景（Props可能动态变化） #

如果foo或bar需要随父组件传入值动态更新，用$derived创建响应式变量，确保bar始终基于最新的foo值计算：

let { foo = 42 } = $props();
// 响应式计算bar：传入bar则用传入值，否则用当前foo+1
let bar = $derived($props().bar ?? (foo + 1));

或者也可以先获取完整的Props对象，再分别创建响应式变量，逻辑更清晰：

const props = $props();
let foo = $derived(props.foo ?? 42);
let bar = $derived(props.bar ?? (foo + 1));

为什么原写法不生效？ #

虽然原生JS的对象解构允许默认值引用前面的变量，但Svelte 5中$props()的解构默认值只会在组件初始化时计算一次。后续foo或传入的bar发生变化时，bar的默认值不会自动更新；如果foo是父组件动态传入的，初始化时还可能拿不到最新值，导致计算错误。

内容的提问来源于stack exchange，提问作者tobiasBora