面试题：Svelte父子组件复杂数据传递与响应式处理

Question

父组件中有一个对象数组`[{name: 'Alice', age: 25}, {name: 'Bob', age: 30}]`，需要传递给子组件。子组件要能根据数组中对象的`age`属性过滤出年龄大于25的对象，并在界面上展示。请说明实现思路并给出关键代码，同时解释Svelte在这个过程中的响应式原理。

Answer 1

实现思路

1. 在父组件中定义对象数组，并通过属性传递给子组件。
2. 子组件接收数组，使用filter方法根据age属性过滤出年龄大于25的对象。
3. 在子组件的模板中展示过滤后的对象。

关键代码

父组件 (Parent.svelte)

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

<Child {people}/>

子组件 (Child.svelte)

<script>
    export let people;
    const filteredPeople = people.filter(person => person.age > 25);
</script>

<ul>
    {#each filteredPeople as person}
        <li>{person.name}: {person.age}</li>
    {/each}
</ul>

Svelte响应式原理

1. 依赖跟踪：Svelte使用一种基于赋值的依赖跟踪机制。当一个变量被赋值时，Svelte会记录下哪些语句或表达式依赖于这个变量。在上述例子中，filteredPeople依赖于people。
2. 自动更新：当people数组发生变化（例如，在父组件中修改了数组内容），Svelte检测到people的赋值操作，由于filteredPeople依赖于people，Svelte会自动重新运行filter操作，并更新界面上依赖于filteredPeople的部分，也就是<ul>中的列表。这使得开发者无需手动管理状态变化和界面更新的关联，大大简化了开发过程。