Svelte中如何绑定pageData并保留响应式？

方案1：本地状态+Effect同步Props变化 #

在子组件中维护本地响应式状态，通过$effect监听Props的变化来同步本地状态，既消除绑定警告，又能在Props更新时同步数据：

type Props = {
  data: PageData;
};

// 获取响应式Props
let { data }: Props = $props();
// 初始化本地响应式状态
let product = $state({ ...data.product });

// 监听data的变化，同步本地product
$effect(() => {
  product = { ...data.product };
}, [data]);

<!-- 绑定本地状态，无警告 -->
<input bind:value={product.name} />

方案2：同步本地状态到父组件（双向绑定） #

如果需要将子组件的修改同步回父组件，遵循Svelte单向数据流规范，通过$emit触发更新事件，配合父组件的bind:语法实现双向绑定：

type Props = {
  data: PageData;
};

let { data }: Props = $props();
let product = $state({ ...data.product });

// 同步Props变化到本地状态
$effect(() => {
  product = { ...data.product };
}, [data]);

// 本地状态变化时通知父组件更新Props
$effect(() => {
  $emit('update:data', { ...data, product });
}, [product]);

父组件使用方式：

<YourComponent bind:data={parentPageData} />

问题原因说明 #

• 直接绑定data.product.name触发警告：Svelte的绑定系统更倾向于绑定到直接的响应式变量，嵌套属性的绑定会被标记为非响应式属性（尽管对象本身是响应式的），因此抛出警告。
• 直接解构到$state丢失响应式：$state仅初始化一次值，不会自动跟踪Props的后续变化，因此当父组件更新data时，本地product不会同步更新。

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