Svelte中querySelector内更新state无效问题及原理问询

以下是我编写的Svelte组件代码：

<script lang="ts">
    import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
    import { onMount } from 'svelte';
    import Fa from 'svelte-fa/src/fa.svelte';

    let navbarItemsWrapper: HTMLUListElement;
    let showDrawer = false;

    onMount(() => {
        navbarItemsWrapper.querySelectorAll('a').forEach((element) => {
            element.addEventListener('click', () => {
                showDrawer = false;
            });
        });
    });
</script>

<div class="drawer">
    <input id="navbar-drawer" type="checkbox" class="drawer-toggle" bind:checked={showDrawer} />
    <div class="drawer-content flex flex-col">
        <!-- Navbar -->
        <div class="w-full navbar">
            <div class="flex-none lg:hidden">
                <label for="navbar-drawer" class="btn btn-square btn-ghost">
                    <Fa icon={faBarsStaggered} />
                </label>
            </div>
        </div>
    </div>
    <div class="drawer-side z-10">
        <label for="navbar-drawer" class="drawer-overlay" />
        <ul class="menu p-4 w-80 h-full bg-base-200" bind:this={navbarItemsWrapper}>
            <slot name="drawer-items" />
        </ul>
    </div>
</div>

我在链接的点击事件里更新showDrawer变量，但复选框的checked状态无法同步更新，只有给input添加bind:checked={showDrawer}双向绑定后功能才正常。明明不需要双向绑定，为什么必须用它才能生效？

补充咨询 #

1. 使用Svelte原生的on:click会有什么差异？为什么这种方式下响应式系统能感知到需要更新复选框的状态？
2. 为什么Svelte无法识别我通过querySelector绑定的事件中对showDrawer的更新？

解答 #

核心原因：单向绑定与DOM状态的脱节

不用双向绑定时，showDrawer和复选框的checked状态是单向关联的：组件初始化时，showDrawer的值会同步到复选框，但之后你更新showDrawer，Svelte不会自动把新值同步回DOM——因为单向绑定只负责从组件状态到DOM的一次渲染，后续状态变化不会主动更新DOM，除非你显式声明绑定关系。而双向绑定bind:checked本质是同时做了两件事：一是把showDrawer的值传给复选框，二是监听复选框的change事件来更新showDrawer，同时还会在showDrawer变化时自动同步回DOM的checked属性，这才让状态和DOM保持一致。

针对补充问题的解答

1. Svelte原生on:click的差异
   Svelte的原生事件绑定（比如on:click）是被框架追踪的，当你在事件回调里更新响应式变量时，Svelte会自动触发组件的重新渲染，重新计算DOM需要更新的部分——包括把showDrawer的新值同步到复选框的checked属性。而你用addEventListener绑定的事件是脱离Svelte框架控制的原生DOM事件，Svelte无法追踪到这个回调里的变量更新，自然不会触发重新渲染，DOM也就不会同步状态。

2. querySelector绑定事件无法被识别的原因
   你在onMount里用querySelector获取DOM元素并绑定原生事件，这种操作完全绕开了Svelte的响应式系统。Svelte的响应式更新依赖于它编译代码时插入的追踪逻辑——只有在Svelte管理的上下文（比如模板里的事件绑定、组件生命周期内的特定钩子逻辑）里更新变量，才会触发追踪和重新渲染。而原生addEventListener的回调不在这个追踪范围内，所以你更新showDrawer后，Svelte不知道要去更新复选框的checked状态。

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