面试题：Svelte中Props传递下的复杂数据结构处理

Question

假设父组件有一个包含多个对象的数组`users`，每个对象有`name`和`age`属性。将`users`数组通过props传递给子组件。子组件需要遍历这个数组，以表格形式展示每个用户的`name`和`age`。请实现这一Svelte父子组件数据交互及展示功能，并处理可能出现的响应式更新问题。

Answer 1

父组件（App.svelte）

<script>
    import UserTable from './UserTable.svelte';
    const users = [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
        { name: 'Charlie', age: 35 }
    ];
</script>

<UserTable {users} />

子组件（UserTable.svelte）

<script>
    export let users = [];
</script>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        {#each users as user}
            <tr>
                <td>{user.name}</td>
                <td>{user.age}</td>
            </tr>
        {/each}
    </tbody>
</table>

处理响应式更新

1. 在父组件更新数据：如果在父组件中更新users数组，例如添加新用户或修改现有用户信息，Svelte会自动检测到这些变化并将新数据传递给子组件，子组件会重新渲染。

<script>
    import UserTable from './UserTable.svelte';
    let users = [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
        { name: 'Charlie', age: 35 }
    ];

    function addUser() {
        users = [...users, { name: 'David', age: 40 }];
    }
</script>

<UserTable {users} />
<button on:click={addUser}>Add User</button>

2. 在子组件中处理响应式更新：子组件在接收到新的users数组时，会自动根据新数据重新渲染表格。Svelte的响应式系统基于依赖跟踪，当users数组发生变化时，依赖于它的模板部分（即<table>中的#each块）会自动更新。