面试题：探索 Svelte 更高效跨组件数据传递方案的思路与实践

方案一：通过 Svelte Stores 进行跨组件数据传递

原理：Svelte Stores 本质上是一个带有 subscribe 方法的对象，组件可以订阅 store 的变化，当 store 的值发生改变时，所有订阅的组件都会自动更新。
优势：
- 解耦组件：组件之间不需要直接引用，降低了组件间的耦合度，使得代码更易于维护和扩展。
- 实时更新：数据变化能够实时反映到订阅的组件上，适合用于需要实时同步数据的场景。
挑战：
- 命名冲突：在大型项目中，众多的 stores 可能会出现命名冲突的问题，需要良好的命名规范来避免。
- 内存管理：如果不合理使用，大量的订阅可能会导致内存泄漏，特别是在组件销毁时没有正确取消订阅。
代码示例：

<script>
    import { writable } from'svelte/store';
    // 创建一个 store
    const myStore = writable('初始值');

    let value;
    const unsubscribe = myStore.subscribe((newValue) => {
        value = newValue;
    });

    function updateStore() {
        myStore.update((val) => val + '，更新了');
    }
</script>

<button on:click={updateStore}>更新数据</button>
<p>{value}</p>

{#if false}
    {unsubscribe()}
{/if}

方案二：使用 Context API

原理：Svelte 允许通过 setContext 和 getContext 函数在组件树中共享数据。父组件使用 setContext 提供数据，子组件通过 getContext 获取数据，这种方式可以实现跨层级的组件通信。
优势：
- 方便跨层级通信：无需通过中间组件层层传递数据，适合深层嵌套组件间的数据共享。
- 集中管理：对于某些全局或特定层级共享的数据，可以集中在父组件设置，便于管理。
挑战：
- 数据流向不清晰：由于数据可以跨多层传递，可能导致数据流向难以追踪，增加调试难度。
- 滥用风险：过度使用可能破坏组件的封装性，使代码结构变得混乱。
代码示例：

<!-- 父组件 -->
<script>
    import { setContext } from'svelte';
    const sharedData = '来自父组件的数据';
    setContext('sharedDataContext', sharedData);
</script>

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

<!-- 子组件 -->
<script>
    import { getContext } from'svelte';
    const sharedData = getContext('sharedDataContext');
</script>

<p>{sharedData}</p>

方案三：事件总线模式

原理：创建一个全局的事件总线对象，组件通过在事件总线上发布和订阅事件来进行通信。当一个组件发布特定事件时，所有订阅该事件的组件都会收到通知，并可以获取相关数据。
优势：
- 灵活性高：组件间通信更加灵活，不受组件层级关系的限制，任何组件都可以发布和订阅事件。
- 易于扩展：新的组件可以很容易地加入到事件通信体系中，只需订阅感兴趣的事件即可。
挑战：
- 事件命名冲突：随着项目规模增大，事件名称可能会出现冲突，需要严格的命名约定。
- 维护困难：大量的事件发布和订阅可能导致代码逻辑分散，难以维护和调试。
代码示例：

<script>
    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));
            }
        }
    };

    let receivedData;
    eventBus.on('customEvent', (data) => {
        receivedData = data;
    });

    function sendEvent() {
        eventBus.emit('customEvent', '这是传递的数据');
    }
</script>

<button on:click={sendEvent}>发送事件</button>
<p>{receivedData}</p>

面试题：探索 Svelte 更高效跨组件数据传递方案的思路与实践

知识考点

面试题答案

方案一：通过 Svelte Stores 进行跨组件数据传递

方案二：使用 Context API

方案三：事件总线模式