面试题：Svelte自定义事件与响应式系统的深度融合应用

代码示例

假设我们有一个简单的计数器应用，我们希望在点击按钮时，通过自定义事件来触发计数器的更新，同时避免不必要的重新渲染。

<script>
    let count = 0;

    const handleClick = () => {
        // 创建并触发自定义事件
        const event = new CustomEvent('count-updated', { detail: { value: count + 1 } });
        document.dispatchEvent(event);
    };

    document.addEventListener('count-updated', (e) => {
        count = e.detail.value;
    });
</script>

<button on:click={handleClick}>Increment</button>
<p>The count is: {count}</p>

原理分析

自定义事件触发：在 handleClick 函数中，我们创建了一个 CustomEvent 并命名为 count-updated，同时携带了更新后的数据 detail。然后通过 document.dispatchEvent 触发这个自定义事件。
响应式数据更新：通过 document.addEventListener 监听 count-updated 事件，当事件触发时，更新 count 变量，这会触发Svelte的响应式系统更新视图。
避免不必要的重新渲染：Svelte的响应式系统非常高效，它会跟踪哪些数据被使用在视图中，只有当这些依赖数据发生变化时才会重新渲染。在这个例子中，只有 count 变量被视图使用，所以只有 count 变化时才会重新渲染相关的DOM部分，而不会导致整个组件重新渲染。

Svelte内部管理和优化机制

细粒度的依赖跟踪：Svelte使用了一种细粒度的依赖跟踪机制。当一个变量在视图中被使用时，Svelte会记录下这个变量与视图部分的依赖关系。只有当这个变量的值发生变化时，才会触发相关视图部分的重新渲染。
存储依赖关系：Svelte内部使用一个依赖图（dependency graph）来存储变量和视图之间的依赖关系。这个图记录了每个变量被哪些视图部分使用，以及每个视图部分依赖哪些变量。
批量更新：Svelte会批量处理更新，而不是每次变量变化都立即重新渲染。这意味着在同一事件循环中，如果有多个变量发生变化，Svelte会将这些变化收集起来，然后一次性更新视图，从而提高性能。

星途面试题库

面试题：Svelte自定义事件与响应式系统的深度融合应用

知识考点

面试题答案

代码示例

原理分析

Svelte内部管理和优化机制