面试题：Svelte可复用UI组件的事件处理与通信优化

Question

假设你正在构建一个可复用的按钮组件，在Svelte中如何优化该组件与父组件及其他子组件之间的事件通信机制，以确保交互逻辑的清晰与高效，同时避免潜在的内存泄漏问题。请结合代码示例说明。

Answer 1

1. 使用 bind:this 优化组件通信

在Svelte中，可以通过 bind:this 将父组件的引用传递给子组件，以便子组件直接访问父组件的方法或属性。

子组件 Button.svelte

<script>
    let parent;
    const handleClick = () => {
        if (parent) {
            parent.handleButtonClick();
        }
    };
</script>

<button on:click={handleClick}>Click me</button>

父组件 App.svelte

<script>
    import Button from './Button.svelte';
    const handleButtonClick = () => {
        console.log('Button clicked from parent');
    };
</script>

<Button bind:this={parent}/>

2. 利用 createEventDispatcher 进行事件分发

Svelte提供了 createEventDispatcher 来创建自定义事件分发器，这对于子组件向父组件传递数据或通知非常有用。

子组件 Button.svelte

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    const handleClick = () => {
        dispatch('button-clicked', { message: 'Button was clicked' });
    };
</script>

<button on:click={handleClick}>Click me</button>

父组件 App.svelte

<script>
    import Button from './Button.svelte';
    const handleButtonClick = (event) => {
        console.log(event.detail.message);
    };
</script>

<Button on:button-clicked={handleButtonClick}/>

3. 避免内存泄漏

为了避免内存泄漏，在组件销毁时，需要清理任何可能存在的事件监听器或订阅。Svelte提供了 $: onDestroy 生命周期函数来处理这种情况。

子组件 Button.svelte（假设添加了一个全局事件监听器）

<script>
    import { onDestroy } from'svelte';
    const handleWindowClick = () => {
        console.log('Window was clicked');
    };
    window.addEventListener('click', handleWindowClick);
    onDestroy(() => {
        window.removeEventListener('click', handleWindowClick);
    });
</script>

<button>Button</button>

通过以上方法，可以优化按钮组件与父组件及其他子组件之间的事件通信机制，确保交互逻辑清晰高效，同时避免潜在的内存泄漏问题。