面试题：Svelte组件间通信与状态管理

组件间数据传递方式

通过props传递
- 描述：父组件向子组件传递数据的常见方式。父组件在调用子组件标签时，以属性的形式传入数据，子组件通过声明同名的props来接收。
- 优点：简单直观，数据流向清晰，易于理解和维护，适合单向数据流动场景。
- 缺点：如果组件嵌套层次较深，传递数据会变得繁琐，可能出现“prop drilling”（属性透传）问题。
- 示例：
  - 父组件（App.svelte）：

<script>
    let message = 'Hello from parent';
</script>

<ChildComponent {message}/>

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

 - **子组件（ChildComponent.svelte）**：

<script>
    export let message;
</script>

<p>{message}</p>

事件机制
- 描述：子组件通过$emit（Svelte中是通过createEventDispatcher创建的函数来触发事件）向父组件传递数据。父组件在调用子组件标签时，通过on:eventname来监听事件并接收数据。
- 优点：实现子组件向父组件的反向数据传递，使组件间的交互更加灵活。
- 缺点：只能从子组件向直接父组件传递数据，不能跨级传递，且对于复杂的数据交互逻辑，代码可能变得难以维护。
- 示例：
  - 子组件（ChildComponent.svelte）：

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    function sendData() {
        let data = 'Data from child';
        dispatch('childEvent', data);
    }
</script>

<button on:click={sendData}>Send data to parent</button>

 - **父组件（App.svelte）**：

<script>
    function handleChildEvent(data) {
        console.log('Received data from child:', data);
    }
</script>

<ChildComponent on:childEvent={handleChildEvent}/>

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

共享状态管理方式

Svelte stores
- 描述：Svelte stores是一种响应式数据存储机制。可以创建可读可写的stores（如writable），只读的stores（如readable）和派生的stores（如derived）。多个组件可以订阅这些stores，当store中的数据变化时，所有订阅的组件会自动更新。
- 优点：
  - 简单易用，内置在Svelte框架中，无需引入额外的库。
  - 高效的响应式更新机制，只有依赖数据变化的组件会重新渲染。
- 缺点：对于大型应用，管理多个stores可能变得复杂，缺乏一些高级状态管理库（如Redux）的功能，如时间旅行调试等。
- 示例：
  - 创建store（counter.js）：

import { writable } from'svelte/store';

export const counter = writable(0);

 - **使用store的组件（App.svelte）**：

<script>
    import { counter } from './counter.js';
    let value;
    counter.subscribe((val) => {
        value = val;
    });
    function increment() {
        counter.update((n) => n + 1);
    }
</script>

<p>{value}</p>
<button on:click={increment}>Increment</button>

Context API
- 描述：通过setContext和getContext函数，祖先组件可以向其所有后代组件提供数据，而无需通过props层层传递。
- 优点：解决了“prop drilling”问题，适合在嵌套组件层次较深且需要共享数据的场景。
- 缺点：数据流向不直观，调试相对困难，因为数据传递没有显式的组件间连接。
- 示例：
  - 祖先组件（App.svelte）：

<script>
    import { setContext } from'svelte';
    let sharedData = 'Shared value';
    setContext('sharedDataContext', sharedData);
</script>

<GrandChildComponent/>

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

 - **后代组件（GrandChildComponent.svelte）**：

<script>
    import { getContext } from'svelte';
    let sharedData = getContext('sharedDataContext');
</script>

<p>{sharedData}</p>

星途面试题库

面试题：Svelte组件间通信与状态管理

知识考点

面试题答案

组件间数据传递方式

共享状态管理方式