面试题：Svelte中$:符号在嵌套组件与响应式数据流管理的深度应用

Question

构建一个Svelte应用，包含父组件和子组件。父组件有一个数组`items`，每个元素是一个对象`{id: number, value: string}`。子组件接收`items`中的一个对象作为属性。在父组件中使用`$:`符号实现，当数组`items`中任何一个对象的`value`属性变化时，更新一个全局变量`totalLength`为所有`items`中`value`字符串长度之和。子组件中使用`$:`符号实现，当接收到的对象的`value`变化时，更新一个局部变量`valueLength`为当前`value`的长度，并将这个长度传递回父组件，父组件将所有子组件传递回来的长度累加并与`totalLength`进行比较验证。请给出完整的父子组件代码实现。

Answer 1

父组件代码（App.svelte）

<script>
    let items = [
        {id: 1, value: 'apple'},
        {id: 2, value: 'banana'},
        {id: 3, value: 'cherry'}
    ];
    let totalLength = 0;
    let subTotalLength = 0;

    $: totalLength = items.reduce((acc, item) => acc + item.value.length, 0);

    const handleSubLengthChange = (length) => {
        subTotalLength += length;
        console.log(`验证: totalLength=${totalLength}, subTotalLength=${subTotalLength}`);
    };
</script>

{#each items as item}
    <Item {item} on:subLengthChange={handleSubLengthChange}/>
{/each}

子组件代码（Item.svelte）

<script>
    export let item;
    let valueLength = 0;

    $: valueLength = item.value.length;

    const sendLength = () => {
        $: dispatch('subLengthChange', valueLength);
    };

    $: item.value && sendLength();
</script>