面试题：Svelte中事件派发与Context API在数据传递场景的区别

Question

请阐述在Svelte中，事件派发和Context API在数据传递场景下，各自的使用方式、适用场景以及主要区别是什么。可以举例说明。

Answer 1

事件派发

• 使用方式：在Svelte中，通过createEventDispatcher创建一个事件派发器。在组件内部定义需要派发的事件，当满足某些条件时，使用事件派发器触发该事件。例如：

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    function handleClick() {
        dispatch('custom - event', { data: 'Hello, this is from event dispatch' });
    }
</script>

<button on:click={handleClick}>Dispatch Event</button>

在父组件中接收该事件：

<script>
    import ChildComponent from './ChildComponent.svelte';
    function handleCustomEvent(event) {
        console.log(event.detail.data);
    }
</script>

<ChildComponent on:custom - event={handleCustomEvent} />

• 适用场景：适用于父子组件间的单向数据传递，当子组件发生某些行为，需要通知父组件并传递相关数据时使用。比如表单组件内部校验成功或失败时，通知父组件进行后续处理。
• 特点：数据流动方向清晰，是从子组件到父组件。事件驱动，只有在事件被触发时才会传递数据。

Context API

• 使用方式：通过setContext在父组件中设置上下文数据，任何子组件（无论嵌套多深）都可以通过getContext获取该数据。例如：

<!-- ParentComponent.svelte -->
<script>
    import { setContext } from'svelte';
    const sharedData = { message: 'This is shared data' };
    setContext('shared - context', sharedData);
</script>

{#if true}
    <ChildComponent />
{/if}

<!-- ChildComponent.svelte -->
<script>
    import { getContext } from'svelte';
    const sharedData = getContext('shared - context');
    console.log(sharedData.message);
</script>

• 适用场景：适用于跨层级组件间的数据共享，避免了通过多层组件传递数据的繁琐。比如应用的主题配置、用户认证信息等，多个不同层级的组件都可能需要使用的共享数据。
• 特点：可以跨层级传递数据，不需要在中间层级组件逐一传递。数据共享性强，多个组件可以同时访问和使用。但可能导致数据流向不够清晰，调试相对困难。

主要区别

1. 数据流向：事件派发是单向的，从子组件到父组件；Context API可以实现跨层级的数据共享，数据流向相对复杂，不受父子关系严格限制。
2. 触发时机：事件派发依赖于事件触发，是一种主动行为；Context API的数据是持续存在供组件获取的，只要组件存在且调用getContext就能获取到数据。
3. 适用场景：事件派发适用于特定行为发生时传递数据，强调组件间的交互；Context API适用于共享全局或跨层级的数据，强调数据的共享性。