面试题：Svelte父子组件数据传递中的响应式更新问题

确保子组件及时响应父组件数据变化
- 在Svelte中，默认情况下，当父组件传递给子组件的属性值发生变化时，子组件会自动响应式更新。
- 例如，假设有一个父组件Parent.svelte和一个子组件Child.svelte：
  - Child.svelte

<script>
    export let value;
</script>

<p>{value}</p>

 - **Parent.svelte**

<script>
    import Child from './Child.svelte';
    let count = 0;
    const increment = () => {
        count++;
    };
</script>

<button on:click={increment}>Increment</button>
<Child value={count} />

这里Parent.svelte中的count值发生变化时，Child.svelte中的value会自动更新，因为Svelte的响应式系统会检测到count的变化，并将新值传递给子组件。

传递和更新复杂对象或数组时的要点
- 对象：
  - 当传递一个复杂对象时，要注意如果直接修改对象内部的属性，Svelte可能无法检测到变化。例如，假设父组件传递一个对象user给子组件：
    - Child.svelte

<script>
    export let user;
</script>

<p>{user.name}</p>

   - **Parent.svelte**

<script>
    import Child from './Child.svelte';
    let user = {name: 'John', age: 30};
    const updateUser = () => {
        // 这种直接修改对象内部属性的方式，Svelte可能检测不到变化
        user.age = 31; 
    };
</script>

<button on:click={updateUser}>Update User</button>
<Child user={user} />

 - 为了让Svelte检测到变化，应该创建一个新的对象。例如：

<script>
    import Child from './Child.svelte';
    let user = {name: 'John', age: 30};
    const updateUser = () => {
        user = {...user, age: 31}; 
    };
</script>

<button on:click={updateUser}>Update User</button>
<Child user={user} />

数组：
- 与对象类似，直接修改数组元素可能不会触发响应式更新。例如：
  - Child.svelte

<script>
    export let numbers;
</script>

<ul>
    {#each numbers as number}
        <li>{number}</li>
    {/each}
</ul>

   - **Parent.svelte**

<script>
    import Child from './Child.svelte';
    let numbers = [1, 2, 3];
    const updateNumbers = () => {
        // 这种直接修改数组元素的方式，Svelte可能检测不到变化
        numbers[0] = 4; 
    };
</script>

<button on:click={updateNumbers}>Update Numbers</button>
<Child numbers={numbers} />

 - 为了触发更新，可以创建一个新的数组。例如：

<script>
    import Child from './Child.svelte';
    let numbers = [1, 2, 3];
    const updateNumbers = () => {
        numbers = [4, ...numbers.slice(1)]; 
    };
</script>

<button on:click={updateNumbers}>Update Numbers</button>
<Child numbers={numbers} />

另外，Svelte提供了一些特殊的数组更新方法，如$: numbers[0] = 4;，这种方式也可以触发响应式更新，但一般建议使用创建新数组或对象的方式，以保持代码的可预测性和响应式系统的稳定性。

星途面试题库

面试题：Svelte父子组件数据传递中的响应式更新问题

知识考点

面试题答案