MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Svelte 响应式表达式：动态计算与更新

2021-06-134.4k 阅读

Svelte 响应式表达式基础

在 Svelte 中，响应式表达式是实现动态计算和更新的核心机制之一。简单来说，响应式表达式是一个 JavaScript 表达式，当它所依赖的值发生变化时，表达式会自动重新计算，并且相关的 DOM 部分也会相应地更新。

简单的响应式表达式示例

我们来看一个非常基础的示例。假设我们有一个简单的计数器应用，需要在页面上显示当前的计数数值，并且有一个按钮来增加计数。

<script>
    let count = 0;
</script>

<button on:click={() => count++}>Increment</button>
<p>The count is {count}</p>

在这个例子中，{count} 就是一个简单的响应式表达式。当 count 的值通过点击按钮发生变化时，<p> 标签内显示的内容会自动更新。这是因为 Svelte 会追踪表达式中依赖的变量（这里是 count），一旦变量变化，就重新渲染包含该表达式的 DOM 部分。

复杂一些的响应式表达式

我们可以让响应式表达式变得更复杂。比如，我们希望显示当前计数的平方值。

<script>
    let count = 0;
</script>

<button on:click={() => count++}>Increment</button>
<p>The square of the count is {count * count}</p>

这里的 {count * count} 就是一个更复杂的响应式表达式。同样，当 count 变化时，这个表达式会重新计算，页面上显示的平方值也会更新。

响应式声明（$: 前缀）

在 Svelte 中，除了在模板中使用响应式表达式，还可以通过 $: 前缀来创建响应式声明。

基本用法

假设我们有两个变量 a 和 b，我们希望有一个变量 sum 始终等于 a + b。

<script>
    let a = 1;
    let b = 2;
    $: sum = a + b;
</script>

<p>a: {a}</p>
<p>b: {b}</p>
<p>sum: {sum}</p>

<button on:click={() => a++}>Increment a</button>
<button on:click={() => b++}>Increment b</button>

在这个例子中，$: sum = a + b; 就是一个响应式声明。每当 a 或者 b 的值发生变化时，sum 都会重新计算。这种方式适用于当你需要在组件逻辑中进行一些基于其他变量的动态计算，而不仅仅是在模板中显示。

响应式声明中的副作用

响应式声明不仅可以用于简单的变量赋值，还可以执行一些副作用操作。比如，当 count 达到一定值时，我们希望在控制台打印一条消息。

<script>
    let count = 0;
    $: {
        if (count >= 10) {
            console.log('Count has reached or exceeded 10');
        }
    }
</script>

<button on:click={() => count++}>Increment</button>
<p>The count is {count}</p>

在这个响应式声明块中，当 count 的值发生变化时，条件判断会重新执行。如果 count 大于等于 10，就会在控制台打印消息。

响应式数组和对象

Svelte 对响应式数组和对象的处理也有一些特殊之处。

响应式数组

假设我们有一个数组，并且希望在页面上显示数组元素的总和。

<script>
    let numbers = [1, 2, 3];
    $: total = numbers.reduce((acc, num) => acc + num, 0);
</script>

<p>The total of numbers is {total}</p>
<button on:click={() => numbers.push(1)}>Add a number</button>

当我们通过 numbers.push(1) 向数组中添加元素时，total 会自动重新计算，因为 Svelte 会追踪数组的变化。但是，直接通过索引修改数组元素可能不会触发响应式更新。例如：

<script>
    let numbers = [1, 2, 3];
    $: total = numbers.reduce((acc, num) => acc + num, 0);
    function updateElement() {
        numbers[0] = 10; // 这种方式不会触发响应式更新
    }
</script>

<p>The total of numbers is {total}</p>
<button on:click={updateElement}>Update first element</button>

为了让这种情况也能触发响应式更新，我们可以使用 Svelte 提供的 $set 方法。

<script>
    import { $set } from'svelte/store';
    let numbers = [1, 2, 3];
    $: total = numbers.reduce((acc, num) => acc + num, 0);
    function updateElement() {
        $set(numbers, 0, 10);
    }
</script>

<p>The total of numbers is {total}</p>
<button on:click={updateElement}>Update first element</button>

$set 方法会告诉 Svelte 数组发生了变化，从而触发相关响应式表达式的重新计算。

响应式对象

对于对象，类似的规则也适用。假设我们有一个包含用户信息的对象，并且希望计算用户年龄的总和。

<script>
    let users = [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
    ];
    $: totalAge = users.reduce((acc, user) => acc + user.age, 0);
</script>

<p>The total age of users is {totalAge}</p>
<button on:click={() => users.push({ name: 'Charlie', age: 35 })}>Add a user</button>

当通过 users.push 添加新用户时，totalAge 会重新计算。但是，如果直接修改对象的属性，也不会触发响应式更新。例如：

<script>
    let users = [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
    ];
    $: totalAge = users.reduce((acc, user) => acc + user.age, 0);
    function updateAge() {
        users[0].age = 26; // 这种方式不会触发响应式更新
    }
</script>

<p>The total age of users is {totalAge}</p>
<button on:click={updateAge}>Update Alice's age</button>

同样，我们可以使用 $set 来处理这种情况。

<script>
    import { $set } from'svelte/store';
    let users = [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
    ];
    $: totalAge = users.reduce((acc, user) => acc + user.age, 0);
    function updateAge() {
        $set(users[0], 'age', 26);
    }
</script>

<p>The total age of users is {totalAge}</p>
<button on:click={updateAge}>Update Alice's age</button>

这样，当对象属性通过 $set 修改时，相关的响应式表达式会重新计算。

响应式语句块

在 Svelte 中，我们还可以使用响应式语句块来处理更复杂的逻辑。

基本响应式语句块

响应式语句块是由 $: 前缀加上一个代码块组成。例如，我们有一个变量 x，并且希望在 x 变化时执行一系列操作。

<script>
    let x = 0;
    $: {
        console.log('x has changed to', x);
        let doubled = x * 2;
        console.log('Doubled value is', doubled);
    }
</script>

<button on:click={() => x++}>Increment x</button>
<p>x is {x}</p>

在这个例子中，每次 x 的值发生变化，响应式语句块内的代码都会执行。首先会在控制台打印 x 的新值，然后计算 x 的两倍并打印。

响应式语句块中的条件逻辑

我们可以在响应式语句块中添加条件逻辑。比如，我们有一个开关变量 isOn，并且希望根据 isOn 的值来执行不同的操作。

<script>
    let isOn = false;
    $: {
        if (isOn) {
            console.log('The switch is on');
        } else {
            console.log('The switch is off');
        }
    }
</script>

<button on:click={() => isOn =!isOn}>Toggle switch</button>
<p>The switch is {isOn? 'on' : 'off'}</p>

每次 isOn 的值变化时，响应式语句块内的条件判断会重新执行，相应的消息会在控制台打印。

响应式语句块与异步操作

响应式语句块也可以处理异步操作。假设我们有一个变量 searchTerm，并且希望在 searchTerm 变化时发起一个 API 请求。

<script>
    let searchTerm = '';
    let results = [];
    $: {
        if (searchTerm) {
            fetch(`https://example.com/api/search?q=${searchTerm}`)
               .then(response => response.json())
               .then(data => {
                    results = data;
                });
        } else {
            results = [];
        }
    }
</script>

<input type="text" bind:value={searchTerm} placeholder="Search...">
<ul>
    {#each results as result}
        <li>{result}</li>
    {/each}
</ul>

在这个例子中，当 searchTerm 变化并且不为空时，会发起一个 API 请求。请求成功后，将结果更新到 results 数组中，页面上的列表也会相应更新。

响应式依赖管理

理解 Svelte 中响应式依赖的管理对于编写高效的代码至关重要。

显式依赖声明

有时候，Svelte 可能无法自动检测到某些依赖关系。例如，当我们在一个函数内部修改一个变量，而这个函数在响应式表达式外部调用时。

<script>
    let a = 1;
    let b = 2;
    function updateB() {
        b = 3;
    }
    $: sum = a + b;
</script>

<p>a: {a}</p>
<p>b: {b}</p>
<p>sum: {sum}</p>
<button on:click={updateB}>Update b</button>

在这个例子中，直接调用 updateB 函数修改 b 时，sum 不会自动更新，因为 Svelte 没有检测到 updateB 函数内部对 b 的修改与 sum 的依赖关系。为了解决这个问题，我们可以使用 $: () => {} 语法来显式声明依赖。

<script>
    let a = 1;
    let b = 2;
    function updateB() {
        b = 3;
    }
    $: () => {
        sum = a + b;
    };
</script>

<p>a: {a}</p>
<p>b: {b}</p>
<p>sum: {sum}</p>
<button on:click={updateB}>Update b</button>

这样，无论 b 是如何被修改的，sum 都会重新计算。

避免不必要的重新计算

在复杂的应用中，我们需要注意避免不必要的响应式表达式重新计算。例如，如果一个响应式表达式依赖于多个变量，但只有其中一个变量的变化才真正影响结果，我们可以通过一些技巧来优化。

假设我们有一个变量 base 和一个 isMultiply 标志，我们希望根据标志来计算 base 的值或者 base 的平方。

<script>
    let base = 5;
    let isMultiply = false;
    let result;
    $: {
        if (isMultiply) {
            result = base * base;
        } else {
            result = base;
        }
    }
</script>

<p>Base: {base}</p>
<p>Is Multiply: {isMultiply? 'Yes' : 'No'}</p>
<p>Result: {result}</p>
<button on:click={() => base++}>Increment base</button>
<button on:click={() => isMultiply =!isMultiply}>Toggle multiply</button>

在这个例子中，result 的计算依赖于 base 和 isMultiply。但是，如果我们知道只有 isMultiply 变化时才需要重新计算复杂的平方操作，我们可以将逻辑拆分。

<script>
    let base = 5;
    let isMultiply = false;
    let baseValue;
    let result;
    $: baseValue = base;
    $: {
        if (isMultiply) {
            result = baseValue * baseValue;
        } else {
            result = baseValue;
        }
    }
</script>

<p>Base: {base}</p>
<p>Is Multiply: {isMultiply? 'Yes' : 'No'}</p>
<p>Result: {result}</p>
<button on:click={() => base++}>Increment base</button>
<button on:click={() => isMultiply =!isMultiply}>Toggle multiply</button>

这样，当 base 变化时，只会更新 baseValue，而不会重新计算 result 的复杂部分，只有当 isMultiply 变化时才会重新计算 result 的平方操作，从而提高了性能。

响应式表达式与组件交互

在 Svelte 组件中，响应式表达式在组件之间的交互中也起着重要作用。

父组件向子组件传递响应式数据

假设我们有一个父组件 App.svelte 和一个子组件 Child.svelte。父组件有一个计数器变量 count，并且希望将其传递给子组件显示。

App.svelte

<script>
    import Child from './Child.svelte';
    let count = 0;
</script>

<button on:click={() => count++}>Increment</button>
<Child {count} />

Child.svelte

<script>
    export let count;
</script>

<p>The count from parent is {count}</p>

在这个例子中，父组件的 count 是一个响应式变量。当 count 在父组件中变化时，子组件接收到的 count 值也会更新，从而实现了响应式的数据传递。

子组件触发父组件的响应式更新

子组件也可以通过事件触发父组件的响应式更新。比如，子组件有一个按钮，点击按钮可以增加父组件的计数器。

App.svelte

<script>
    import Child from './Child.svelte';
    let count = 0;
    function increment() {
        count++;
    }
</script>

<Child on:increment={increment} />
<p>The count is {count}</p>

Child.svelte

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    function handleClick() {
        dispatch('increment');
    }
</script>

<button on:click={handleClick}>Increment in parent</button>

在这个例子中，子组件通过 dispatch('increment') 触发父组件的 increment 函数，从而更新父组件的 count 变量，实现了子组件触发父组件的响应式更新。

响应式表达式的性能优化

虽然 Svelte 的响应式机制非常强大，但在大型应用中，性能优化仍然是必要的。

减少不必要的响应式声明

尽量避免在组件中创建过多不必要的响应式声明。每个响应式声明都会增加 Svelte 追踪依赖的开销。例如，如果一个变量只在组件初始化时使用，并且不会在运行时改变，就不需要将其声明为响应式。

<script>
    let initialValue = 10;
    let result = initialValue * 2; // 这里 initialValue 不需要是响应式的
</script>

<p>The result is {result}</p>

在这个例子中，initialValue 只在初始化 result 时使用，所以不需要将其声明为响应式变量。

使用防抖和节流

对于频繁触发的事件导致的响应式更新，可以使用防抖和节流技术。例如，如果有一个输入框，用户输入时会触发响应式更新来搜索数据，但我们不希望每次输入都立即发起请求，可以使用防抖。

<script>
    import { debounce } from 'lodash';
    let searchTerm = '';
    let results = [];
    const debouncedSearch = debounce(() => {
        if (searchTerm) {
            fetch(`https://example.com/api/search?q=${searchTerm}`)
               .then(response => response.json())
               .then(data => {
                    results = data;
                });
        } else {
            results = [];
        }
    }, 300);
    $: debouncedSearch();
</script>

<input type="text" bind:value={searchTerm} placeholder="Search...">
<ul>
    {#each results as result}
        <li>{result}</li>
    {/each}
</ul>

在这个例子中，debounce 函数会延迟 300 毫秒执行搜索操作，这样可以避免用户频繁输入时不必要的请求，提高性能。

批量更新

如果有多个相关的变量需要更新，尽量批量更新，而不是逐个更新。例如，假设我们有一个对象 user，包含 name 和 age 属性，并且有一个响应式表达式依赖于这两个属性。

<script>
    let user = { name: 'Alice', age: 25 };
    $: greeting = `Hello, ${user.name}! You are ${user.age} years old.`;
    function updateUser() {
        // 逐个更新
        user.name = 'Bob';
        user.age = 26;
    }
    function batchUpdateUser() {
        // 批量更新
        $set(user, { name: 'Bob', age: 26 });
    }
</script>

<p>{greeting}</p>
<button on:click={updateUser}>Update user (individual)</button>
<button on:click={batchUpdateUser}>Update user (batch)</button>

在这个例子中，使用 $set 进行批量更新可以减少响应式表达式的重新计算次数，提高性能。

响应式表达式的调试技巧

在开发过程中，调试响应式表达式是非常重要的。

使用 console.log

最基本的调试方法就是在响应式表达式或者响应式声明中使用 console.log。例如，在一个响应式语句块中打印变量的值。

<script>
    let x = 0;
    $: {
        console.log('x is currently', x);
        let doubled = x * 2;
        console.log('Doubled value is', doubled);
    }
</script>

<button on:click={() => x++}>Increment x</button>
<p>x is {x}</p>

通过在控制台查看打印的信息，可以了解变量的变化以及响应式表达式的执行情况。

使用 Svelte 开发者工具

Svelte 提供了强大的开发者工具，可以帮助我们调试响应式表达式。在浏览器中安装 Svelte 开发者工具扩展后，打开应用的开发者工具，就可以看到 Svelte 相关的面板。

在 Svelte 面板中，可以查看组件的状态，包括响应式变量的值以及它们之间的依赖关系。例如，可以看到某个响应式表达式依赖于哪些变量，当变量变化时，也可以清楚地看到哪些响应式表达式会重新计算。这对于排查复杂的响应式逻辑问题非常有帮助。

断点调试

在 Svelte 组件的 JavaScript 代码中设置断点也是一种有效的调试方法。例如，在响应式声明或者响应式表达式相关的函数中设置断点。

<script>
    let a = 1;
    let b = 2;
    $: {
        debugger;
        let sum = a + b;
        console.log('Sum is', sum);
    }
</script>

<p>a: {a}</p>
<p>b: {b}</p>

当代码执行到 debugger 语句时，浏览器会暂停执行，此时可以查看变量的值，单步执行代码，从而深入了解响应式表达式的计算过程。

响应式表达式在实际项目中的应用场景

数据可视化

在数据可视化项目中，响应式表达式可以用于根据数据的变化实时更新图表。例如，我们有一个折线图组件，数据来自一个数组。

<script>
    import { onMount } from'svelte';
    import { lineChart } from 'vis-data-visualization';
    let data = [1, 2, 3, 4, 5];
    let chart;
    $: {
        if (chart) {
            chart.updateData(data);
        }
    }
    onMount(() => {
        chart = lineChart({
            data,
            target: document.getElementById('chart')
        });
    });
</script>

<div id="chart"></div>
<button on:click={() => data.push(data.length + 1)}>Add data point</button>

在这个例子中，当 data 数组发生变化时，响应式表达式会更新图表的数据，实现数据可视化的动态更新。

表单验证

在表单处理中，响应式表达式可以用于实时验证表单输入。例如，我们有一个注册表单，需要验证用户名是否为空。

<script>
    let username = '';
    $: isValid = username.length > 0;
    function handleSubmit() {
        if (isValid) {
            console.log('Form submitted successfully');
        } else {
            console.log('Username cannot be empty');
        }
    }
</script>

<input type="text" bind:value={username} placeholder="Username">
<button on:click={handleSubmit}>Submit</button>
{#if!isValid}
    <p>Username cannot be empty</p>
{/if}

当 username 变化时，isValid 会重新计算，从而实时显示表单的验证状态。

多语言切换

在国际化应用中，响应式表达式可以用于根据用户选择的语言切换界面文本。

<script>
    let language = 'en';
    const messages = {
        en: {
            greeting: 'Hello',
            goodbye: 'Goodbye'
        },
        fr: {
            greeting: 'Bonjour',
            goodbye: 'Au revoir'
        }
    };
    $: greetingMessage = messages[language].greeting;
    $: goodbyeMessage = messages[language].goodbye;
</script>

<select bind:value={language}>
    <option value="en">English</option>
    <option value="fr">French</option>
</select>

<p>{greetingMessage}</p>
<p>{goodbyeMessage}</p>

当 language 变化时，greetingMessage 和 goodbyeMessage 会重新计算，实现界面文本的多语言切换。

通过深入理解和运用 Svelte 的响应式表达式，开发者可以构建出更加动态、高效和交互式的前端应用程序。无论是简单的计数器应用，还是复杂的数据可视化和多语言切换功能，响应式表达式都能发挥重要作用。同时，合理地进行性能优化和掌握调试技巧，能够确保应用在各种场景下都能稳定、高效地运行。在实际项目中，不断探索响应式表达式在不同业务场景中的应用，能够进一步提升开发效率和用户体验。