Svelte组件中如何跳过变量的初始响应触发？

我在Svelte中编写了一个简单的自定义组件，使用响应式特性执行代码：

<script lang="ts">
    export let liked: boolean
    $: {
         // 当liked切换时需要执行的代码...
    }
</script>

问题在于组件首次挂载时，liked会触发响应式语句执行代码，这不符合需求——我希望仅在用户主动切换liked时执行代码。

我自己用initial变量实现了预期效果，但想知道有没有更简洁、符合Svelte风格的写法：

<script lang="ts">
    export let liked: boolean
    let initial = true
    $: {
        if (!initial) {
            // 当liked切换时需要执行的代码...
        } else {
            initial = false
        }
    }
</script>

几种更简洁的实现方式 #

1. 跟踪上一次状态值

通过存储liked的上一次值，首次挂载时跳过执行，仅当值发生变化时触发代码：

<script lang="ts">
    export let liked: boolean;
    let previousLiked: boolean | undefined;

    $: {
        // 首次挂载时previousLiked为undefined，不执行代码
        if (previousLiked !== undefined && liked !== previousLiked) {
            // 用户主动切换liked时执行的代码
        }
        // 更新上一次值
        previousLiked = liked;
    }
</script>

2. 利用onMount标记初始化完成

借助onMount钩子在组件挂载完成后标记初始化状态，避免首次响应式触发：

<script lang="ts">
    import { onMount } from 'svelte';
    export let liked: boolean;
    let initialized = false;

    onMount(() => {
        // 组件挂载完成后才标记初始化完成
        initialized = true;
    });

    $: if (initialized) {
        // 仅在初始化完成后，liked变化时执行代码
    }
</script>

3. 使用$effect（Svelte 4+）

如果使用Svelte 4及以上版本，可以用$effect结合状态跟踪，精准控制执行时机：

<script lang="ts">
    import { onMount, $effect } from 'svelte';
    export let liked: boolean;
    let initialized = false;

    onMount(() => {
        initialized = true;
    });

    $effect(() => {
        if (initialized) {
            // 用户切换liked时执行的代码
        }
    }, [liked]);
</script>

这几种方式都比手动维护initial变量更贴合Svelte的响应式设计思路，其中第一种跟踪上一次值的方式代码最简洁，无需引入额外钩子。

内容的提问来源于stack exchange，提问作者scedira