Svelte中修改Prop内对象属性无响应的问题及方案咨询

我有一个联系表单，使用$state定义了如下状态：

let form = $state({
    name: "",
    email: "",
    files: ([] as any[]),
});

在HTML中将files绑定到FileInput组件：

<FileInput multiple={true} bind:files={form.files} url="/ContactRequest/UploadFile" />

FileInput组件的属性绑定如下：

interface Props {
    files: UploadFile[];
    multiple: boolean;
    url: string;
}

let { files = $bindable(), url, multiple }: Props = $props();

上传过程中修改files数组中元素的progress属性时，确认回调函数已触发，但file.progress的变更无法触发UI更新：

async function startUpload(file: UploadFile): Promise<void> {
    file.progress = 0;
    const formData = new FormData();
    formData.set("file", file);
    const xhr = new XMLHttpRequest();
    file.xhr = xhr;

    const upload = (await request("POST", url, formData, (uploadProgress, _) => {
        console.log(uploadProgress);
        file.progress = uploadProgress;
    }, xhr)).response;
}

请问Svelte能否对这类Prop实现响应式？若当前方式有误，正确的实现方案是什么？

原因分析 #

Svelte的响应式跟踪基于值或引用的变更，而非对象内部属性的深层变化。直接修改数组元素的progress属性时，数组本身的引用没有改变，Svelte无法感知到这种内部属性更新，因此不会触发UI渲染。

可行实现方案 #

有两种常用的解决思路：

1. 用$state包装单个文件对象

在创建或添加UploadFile对象时，使用$state将其包装，让对象内部属性的变更也能被Svelte跟踪：

// 示例：添加文件时创建响应式对象
const addFileToForm = (newFile: File) => {
    const uploadFile = $state({
        file: newFile,
        progress: 0,
        xhr: null
    });
    // 重新赋值数组，触发初始响应式更新
    form.files = [...form.files, uploadFile];
};

后续修改uploadFile.progress时，Svelte会自动感知到变化并更新对应UI。

2. 修改属性后强制更新数组引用

如果不想调整文件对象的创建方式，可以在修改progress后，通过重新赋值数组来触发Svelte的响应式检测：

async function startUpload(file: UploadFile): Promise<void> {
    file.progress = 0;
    const formData = new FormData();
    formData.set("file", file);
    const xhr = new XMLHttpRequest();
    file.xhr = xhr;

    const upload = (await request("POST", url, formData, (uploadProgress, _) => {
        console.log(uploadProgress);
        file.progress = uploadProgress;
        // 重新创建数组引用，强制Svelte更新UI
        files = [...files];
    }, xhr)).response;
}

这种方式通过生成数组的新副本，让Svelte检测到引用变化，从而重新渲染数组相关的UI，展示最新的进度值。

关于Prop响应式的说明 #

Svelte支持Prop的响应式，但要求Prop的值或引用发生显性变更。对于数组、对象这类引用类型的Prop，仅修改内部属性不会触发父、子组件的UI更新，必须通过变更引用（如重新赋值数组/对象），或者让对象本身成为响应式实例（用$state包装）来实现跟踪。

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