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

Question

在Svelte的响应式系统背景下，自定义事件如何与响应式数据进行高效交互，以实现复杂的业务逻辑？举例说明如何优化自定义事件触发时对响应式数据更新的性能，避免不必要的重新渲染。

Answer 1

自定义事件与响应式数据交互

1. 使用 $: 声明响应式数据：在Svelte组件中，使用 $: 前缀来声明响应式数据。例如：

<script>
    let count = 0;
    $: doubledCount = count * 2;
</script>

2. 自定义事件绑定：通过 on:eventName 语法绑定自定义事件。例如，假设我们有一个自定义的 increment 事件：

<script>
    let count = 0;
    function handleIncrement() {
        count++;
    }
</script>
<button on:click={handleIncrement}>Increment</button>
<p>The count is {count}</p>

3. 复杂业务逻辑：当处理复杂业务逻辑时，可以结合 $: 响应式声明。比如，我们希望根据 count 的值来动态改变另一个数据 message：

<script>
    let count = 0;
    $: message = count > 5? 'Greater than 5' : 'Less than or equal to 5';
    function handleIncrement() {
        count++;
    }
</script>
<button on:click={handleIncrement}>Increment</button>
<p>{message}</p>

性能优化 - 避免不必要的重新渲染

1. 细粒度更新：尽量只更新必要的数据。例如，假设有一个包含多个属性的对象，只更新需要改变的属性。

<script>
    let user = {
        name: 'John',
        age: 30,
        address: '123 Main St'
    };
    function updateUserAge() {
        user.age++;
    }
</script>
<button on:click={updateUserAge}>Update Age</button>
<p>{user.name} is {user.age} years old and lives at {user.address}</p>

在这个例子中，只有 user.age 改变，Svelte会进行细粒度更新，不会重新渲染整个组件。

2. 使用 $: 条件语句：通过 $: 结合条件语句来控制响应式更新。例如，只有当 count 是偶数时才更新另一个变量：

<script>
    let count = 0;
    let specialValue;
    $: if (count % 2 === 0) {
        specialValue = count * 10;
    }
    function handleIncrement() {
        count++;
    }
</script>
<button on:click={handleIncrement}>Increment</button>
{#if specialValue}
    <p>Special value: {specialValue}</p>
{/if}

这样，只有在满足条件时才会更新 specialValue，避免了不必要的重新渲染。

3. 防抖与节流：对于频繁触发的自定义事件，可以使用防抖（Debounce）或节流（Throttle）技术。例如，使用 lodash 的 debounce 函数：

<script>
    import { debounce } from 'lodash';
    let searchQuery = '';
    function handleSearch() {
        // 实际的搜索逻辑
        console.log('Searching for:', searchQuery);
    }
    const debouncedSearch = debounce(handleSearch, 300);
</script>
<input type="text" bind:value={searchQuery} on:input={debouncedSearch}>

在这个例子中，debounce 函数会确保 handleSearch 函数在输入停止300毫秒后才被调用，避免了频繁触发导致的性能问题。