面试题：Svelte事件派发机制下子组件传复杂数据给父组件的优化

Question

假设子组件需要向父组件传递一个大型的对象数据，在Svelte的事件派发机制下，如何优化数据传递过程，避免性能问题？阐述你的思路并给出关键代码片段。

Answer 1

思路

1. 序列化与反序列化：将大型对象数据进行序列化（如使用JSON.stringify），传递序列化后的字符串，在父组件接收到后再反序列化（使用JSON.parse）。这样可以减少传递的数据量，因为字符串在传输过程中比复杂对象更高效。
2. 事件节流或防抖：如果子组件频繁触发传递数据的事件，可以使用节流或防抖技术。节流限制事件触发频率，防抖则在一定时间内只触发一次事件，避免不必要的数据传递。
3. 避免不必要的重新渲染：确保父组件接收到数据后，只有在数据真正发生变化时才进行重新渲染。可以使用$:声明响应式变量，并结合Object.is等方法来比较数据是否变化。

关键代码片段

1. 子组件代码（假设为Child.svelte）：

<script>
    let largeObject = { /* 大型对象数据 */ };
    const sendData = () => {
        const serializedData = JSON.stringify(largeObject);
        const customEvent = new CustomEvent('data-transfer', { detail: serializedData });
        document.dispatchEvent(customEvent);
    };
</script>

<button on:click={sendData}>Send Data</button>

2. 父组件代码（假设为Parent.svelte）：

<script>
    let receivedData;
    document.addEventListener('data-transfer', (event) => {
        const deserializedData = JSON.parse(event.detail);
        if (!receivedData ||!Object.is(receivedData, deserializedData)) {
            receivedData = deserializedData;
        }
    });
</script>
{#if receivedData}
    <p>Received Data: {JSON.stringify(receivedData)}</p>
{/if}

3. 使用防抖（以lodash的debounce为例，需先安装lodash）：
   • 子组件代码：

<script>
    import { debounce } from 'lodash';
    let largeObject = { /* 大型对象数据 */ };
    const sendData = () => {
        const serializedData = JSON.stringify(largeObject);
        const customEvent = new CustomEvent('data-transfer', { detail: serializedData });
        document.dispatchEvent(customEvent);
    };
    const debouncedSendData = debounce(sendData, 300); // 300毫秒内只触发一次
</script>

<button on:click={debouncedSendData}>Send Data</button>