面试题：Svelte中如何对复杂对象数据结构进行双向绑定

创建Svelte组件并初始化对象：

<script>
    let user = {
        name: 'John',
        age: 30,
        address: {
            city: 'New York',
            street: '123 Main St'
        }
    };
</script>

对于简单属性（如name和age）的绑定：

使用双向绑定语法bind:value。例如，对于name属性：

<input type="text" bind:value={user.name}>
<p>Name: {user.name}</p>

对于age属性：

<input type="number" bind:value={user.age}>
<p>Age: {user.age}</p>

对于嵌套对象属性（如address中的city和street）的绑定：

同样使用双向绑定。对于city属性：

<input type="text" bind:value={user.address.city}>
<p>City: {user.address.city}</p>

对于street属性：

<input type="text" bind:value={user.address.street}>
<p>Street: {user.address.street}</p>

Svelte的双向绑定机制会自动跟踪对象属性的变化，并将UI上的修改同步回数据对象，反之亦然。但需要注意，当直接修改对象内部属性时，Svelte可能无法检测到对象结构的深层次变化（如添加新的嵌套属性）。在这种情况下，可以通过重新赋值整个对象或使用$: user = {...user }（浅拷贝更新）的方式来确保Svelte能检测到变化。例如，如果要添加一个新的属性到user对象，可以这样做：

<script>
    let user = {
        name: 'John',
        age: 30,
        address: {
            city: 'New York',
            street: '123 Main St'
        }
    };
    function addNewProperty() {
        user = {...user, newProperty: 'Some value' };
    }
</script>
<button on:click={addNewProperty}>Add New Property</button>

星途面试题库

面试题：Svelte中如何对复杂对象数据结构进行双向绑定

知识考点

面试题答案