面试题：Svelte事件派发机制中的细节处理

可能遇到的问题

数据丢失或损坏：在事件派发过程中，复杂数据结构可能由于序列化、反序列化等问题导致部分数据丢失或损坏。例如，对象中的函数属性在传递过程中可能会被丢失，因为 JSON 序列化默认不支持函数。
类型不匹配：父组件在接收数据时，若没有正确的类型声明，可能会将数据误判为其他类型，导致运行时错误。比如，父组件期望接收一个对象数组，但实际接收到的是一个字符串，就会引发错误。
安全性问题：如果传递的数据没有经过验证，可能会存在安全风险。例如，恶意数据可能通过事件传递进入父组件，导致 XSS 攻击等安全漏洞。

确保数据传递准确性和安全性的方法

数据序列化与反序列化：在子组件派发事件前，使用 JSON.stringify 将复杂数据结构转换为字符串，在父组件接收事件后，使用 JSON.parse 将字符串还原为原始数据结构。这样可以确保数据在传递过程中的一致性。
类型检查与断言：在父组件接收数据时，使用 TypeScript 等工具进行类型检查和断言，确保接收到的数据类型与预期一致。如果使用 JavaScript，可以手动检查数据类型。
数据验证：在父组件接收数据后，对数据进行验证，确保数据的合法性和安全性。例如，检查对象的属性是否符合预期，数组的元素是否满足特定条件等。

代码示例

假设我们有一个子组件 Child.svelte 和一个父组件 Parent.svelte。

Child.svelte

<script>
    const complexData = [
        { name: 'Alice', age: 30 },
        { name: 'Bob', age: 25 }
    ];
    const dispatchEvent = new CustomEvent('complex-data-event', { 
        detail: JSON.stringify(complexData) 
    });
    document.dispatchEvent(dispatchEvent);
</script>

Parent.svelte

<script>
    document.addEventListener('complex-data-event', (event) => {
        try {
            const data = JSON.parse(event.detail);
            // 类型检查
            if (!Array.isArray(data) || data.some(item => typeof item!== 'object' ||!('name' in item) ||!('age' in item))) {
                throw new Error('Invalid data structure');
            }
            // 数据验证，例如验证年龄是否为正整数
            const isValid = data.every(item => typeof item.age === 'number' && item.age > 0);
            if (!isValid) {
                throw new Error('Invalid age value');
            }
            console.log('Received data:', data);
        } catch (error) {
            console.error('Error parsing or validating data:', error);
        }
    });
</script>

在上述代码中，子组件将复杂数据结构序列化为字符串后派发事件，父组件接收到事件后反序列化数据，并进行类型检查和数据验证，确保数据传递的准确性和安全性。

星途面试题库

面试题：Svelte事件派发机制中的细节处理

知识考点

面试题答案

可能遇到的问题

确保数据传递准确性和安全性的方法

代码示例

Child.svelte

Parent.svelte