在Svelte中如何在onMount()钩子内更新变量值？

问题原因 #

1. 错误将生命周期钩子onMount放在响应式语句中：onMount回调仅会在组件挂载完成时触发一次，即使套在$:响应式块里，也不会随qrActive的更新重复执行。
2. 你的需求实际是两个场景都要触发qr逻辑：组件初始化/值更新时执行、特殊场景下要求挂载完成后才首次执行。

正确实现代码 #

如果不需要等待DOM挂载完成就能执行qr逻辑，直接用独立响应式语句即可，初始化和qrActive变化时都会自动触发：

<script>
    import { onMount } from "svelte"
    
    let qrActive = false
    console.log(qrActive)

    const handleQr = () => {
        qrActive = !qrActive
    }

    const qr = (qrActive) => {
        if (qrActive) {
            console.log("working");
        } else {
            console.log("Nothing :v")  
        }
    }

    // 响应式语句：自动追踪qrActive变化，初始化也会执行一次
    $: qr(qrActive)
</script>

<button on:click={handleQr}>
  Change!
</button>

如果确实需要等组件挂载完成后再首次执行qr（比如逻辑需要操作DOM元素），可以加挂载标志位配合使用：

<script>
    import { onMount } from "svelte"
    
    let qrActive = false
    let isMounted = false
    console.log(qrActive)

    const handleQr = () => {
        qrActive = !qrActive
    }

    const qr = (qrActive) => {
        if (qrActive) {
            console.log("working");
        } else {
            console.log("Nothing :v")  
        }
    }

    onMount(() => {
        isMounted = true
        qr(qrActive)
    })
    // 只有挂载完成后，才会随qrActive变化触发逻辑
    $: isMounted && qr(qrActive)
</script>

<button on:click={handleQr}>
  Change!
</button>

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