面试题：Svelte事件处理在跨组件通信及性能优化中的应用

事件定义

自定义事件类型：在项目中，为不同的组件间交互定义明确的事件类型。例如，在父子组件通信中，如果子组件需要通知父组件数据更新，可定义 data-updated 这样的事件类型；对于兄弟组件通信，若一个组件状态改变影响另一个组件，定义 status-changed 事件类型。
事件携带数据：根据通信需求，确定事件所携带的数据。比如 data-updated 事件可能携带更新后的数据，可将其定义为包含具体数据字段的对象。

事件传递

父子组件：
- 子组件触发：在Svelte中，子组件可以使用 $dispatch 方法触发事件。例如，子组件 Child.svelte：

<script>
    let data = { newInfo: "Some updated data" };
    function sendUpdate() {
        $dispatch('data-updated', data);
    }
</script>

<button on:click={sendUpdate}>Update Parent</button>

- **父组件监听**：父组件在引入子组件标签时监听事件。例如，父组件 `Parent.svelte`：

<script>
    import Child from './Child.svelte';
    function handleUpdate(event) {
        console.log('Received updated data:', event.detail);
    }
</script>

<Child on:data-updated={handleUpdate} />

兄弟组件：
- 事件总线：创建一个事件总线机制。可以通过一个独立的JavaScript模块来实现。例如 eventBus.js：

const eventBus = {
    events: {},
    on(eventName, callback) {
        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }
        this.events[eventName].push(callback);
    },
    emit(eventName, data) {
        if (this.events[eventName]) {
            this.events[eventName].forEach(callback => callback(data));
        }
    }
};

export default eventBus;

- **组件使用**：一个兄弟组件触发事件，例如 `ComponentA.svelte`：

<script>
    import eventBus from './eventBus.js';
    function sendStatusChange() {
        let newStatus = "changed";
        eventBus.emit('status-changed', newStatus);
    }
</script>

<button on:click={sendStatusChange}>Change Status</button>

- **另一个兄弟组件监听**，例如 `ComponentB.svelte`：

<script>
    import eventBus from './eventBus.js';
    function handleStatusChange(status) {
        console.log('Received status change:', status);
    }
    eventBus.on('status-changed', handleStatusChange);
</script>

事件监听

组件内监听：在组件内部，使用 on:eventName 语法来监听事件。如上述父子组件通信示例中，父组件使用 on:data - updated 监听子组件触发的事件。
事件总线监听：通过事件总线的 on 方法进行监听，如兄弟组件通信示例中 ComponentB.svelte 使用 eventBus.on('status-changed', handleStatusChange) 监听事件。

性能优化

避免不必要的事件触发：在组件内部逻辑中，通过条件判断确保只有在真正需要时才触发事件。例如，在子组件数据更新逻辑中，先对比新旧数据，只有当数据确实发生变化时才触发 data-updated 事件。
解绑事件：在组件销毁时，对于通过事件总线添加的监听事件，要进行解绑操作。例如，在 ComponentB.svelte 中，可以添加 onDestroy 生命周期函数：

<script>
    import { onDestroy } from'svelte';
    import eventBus from './eventBus.js';
    function handleStatusChange(status) {
        console.log('Received status change:', status);
    }
    eventBus.on('status-changed', handleStatusChange);
    onDestroy(() => {
        eventBus.events['status-changed'] = eventBus.events['status-changed'].filter(callback => callback!== handleStatusChange);
    });
</script>

这样可以避免在组件销毁后，事件回调函数仍然存在于内存中导致的内存泄漏问题。同时，对于父子组件间的事件监听，Svelte会自动管理组件卸载时的事件解绑，无需额外操作。

面试题：Svelte事件处理在跨组件通信及性能优化中的应用

知识考点

面试题答案

事件定义

事件传递

事件监听

性能优化