面试题：Svelte中$:符号与复杂数据结构的响应式处理

Question

假设在Svelte组件中有一个对象`person`，结构为`{name: 'John', age: 30}`，现在希望使用`$:`符号实现当`person.age`变化时，一个新变量`nextAge`自动更新为`person.age + 1`，同时当`person.name`变化时，在控制台打印出`'Name has changed'`，请编写完整的Svelte组件代码来实现此功能。

Answer 1

<script>
    let person = {name: 'John', age: 30};
    let nextAge;

    $: {
        nextAge = person.age + 1;
    }

    $: {
        console.log('Name has changed');
    }
</script>

<p>Name: {person.name}</p>
<p>Age: {person.age}</p>
<p>Next Age: {nextAge}</p>

<input type="text" bind:value={person.name} placeholder="Change name">
<input type="number" bind:value={person.age} placeholder="Change age">