面试题：Svelte中onDestroy与资源清理

Websocket连接的建立与维护：

在Svelte组件中，可以在组件脚本部分声明一个WebSocket实例。例如：

<script>
    import { onDestroy } from'svelte';
    let socket;
    const socketUrl = 'ws://your - server - url';
    socket = new WebSocket(socketUrl);
    socket.addEventListener('open', () => {
        console.log('WebSocket连接已打开');
    });
    socket.addEventListener('message', (event) => {
        const data = JSON.parse(event.data);
        console.log('收到消息:', data);
    });
    socket.addEventListener('close', () => {
        console.log('WebSocket连接已关闭');
    });
</script>

使用onDestroy进行清理操作：

onDestroy是Svelte提供的生命周期函数，在组件从DOM中移除时会被调用。
在onDestroy中，我们可以关闭WebSocket连接，以确保不会发生内存泄漏。修改上述代码如下：

<script>
    import { onDestroy } from'svelte';
    let socket;
    const socketUrl = 'ws://your - server - url';
    socket = new WebSocket(socketUrl);
    socket.addEventListener('open', () => {
        console.log('WebSocket连接已打开');
    });
    socket.addEventListener('message', (event) => {
        const data = JSON.parse(event.data);
        console.log('收到消息:', data);
    });
    socket.addEventListener('close', () => {
        console.log('WebSocket连接已关闭');
    });
    onDestroy(() => {
        if (socket.readyState === WebSocket.OPEN) {
            socket.close();
        }
        console.log('组件销毁，WebSocket已关闭');
    });
</script>

为什么onDestroy是必要的：
- 如果在组件销毁时不手动关闭WebSocket连接，WebSocket实例可能仍然保持活跃状态。
- 这会导致内存泄漏，因为即使组件不再被使用且从DOM中移除，WebSocket相关的资源（如网络连接、事件监听器等）依然占用内存。
- 使用onDestroy可以确保在组件生命周期结束时，及时清理这些资源，使应用程序更加健壮和高效。

面试题：Svelte中onDestroy与资源清理

知识考点

面试题答案