面试题：Svelte 状态管理下复杂组件通信的场景与实现

状态管理与组件通信方法

上下文 API：
- 原理：Svelte 提供的 setContext 和 getContext 函数可以用于在组件树中共享数据。顶层组件可以使用 setContext 提供数据，中间层和底层组件通过 getContext 获取数据。
- 优点：适用于多层嵌套组件间传递数据，避免了逐层传递 props 的繁琐。
- 缺点：数据流向不够直观，可能导致调试困难。
自定义事件：
- 原理：底层组件可以通过 createEventDispatcher 创建一个事件分发器，当特定条件满足时，分发事件。顶层组件通过 on:事件名 来监听并处理该事件。
- 优点：可以实现从底层到顶层的通信，且事件驱动的方式符合响应式编程思想。
- 缺点：过多的自定义事件可能导致代码难以维护。
Store：
- 原理：Svelte 的 store 是一种可观察的状态容器。顶层组件可以创建一个 store 来管理全局状态，中间层和底层组件可以订阅这个 store 以获取状态变化，并且可以通过修改 store 来更新状态。
- 优点：清晰的状态管理，便于追踪状态变化。
- 缺点：对于简单应用可能有些过度设计。

大致代码结构

顶层组件（App.svelte）

<script>
    import { setContext, writable } from'svelte/store';
    import MiddleComponent from './MiddleComponent.svelte';
    const globalState = writable({ value: '初始值' });
    setContext('globalState', globalState);
    function complexOperation() {
        // 复杂操作逻辑
        console.log('执行复杂操作');
    }
</script>

<MiddleComponent on:customEvent={complexOperation} />

中间层组件（MiddleComponent.svelte）

<script>
    import BottomComponent from './BottomComponent.svelte';
</script>

<BottomComponent />

底层组件（BottomComponent.svelte）

<script>
    import { getContext } from'svelte';
    import { createEventDispatcher } from'svelte';
    const globalState = getContext('globalState');
    const dispatch = createEventDispatcher();
    let condition = false;
    function handleChange() {
        // 这里可以修改 globalState
        globalState.update(state => {
            state.value = '新值';
            return state;
        });
        if (condition) {
            dispatch('customEvent');
        }
    }
</script>

<button on:click={handleChange}>触发操作</button>

面试题：Svelte 状态管理下复杂组件通信的场景与实现

知识考点

面试题答案

状态管理与组件通信方法

大致代码结构