Svelte中如何避免$effect初始化执行，仅在状态变更时触发？

Svelte 的 $effect 本身就会在组件初始化（挂载）时执行一次，这是它用来建立依赖追踪的既定行为，哪怕依赖没变化也会跑一遍。要让它只在 config 实际变更时执行目标逻辑，有两种实用方案：

方案1：简单跳过首次执行 #

如果只需要跳过初始化那次的逻辑，不用严格对比内容，加个标记就行：

import config from "config.svelte";

let isFirstRun = true;

$effect(() => {
  if (isFirstRun) {
    isFirstRun = false;
    return;
  }

  // 这段代码只会在 config 变更时触发
  console.log("config changed!");
  server_req("config", "POST", $state.snapshot(config));
});

方案2：严格对比内容变更 #

如果需要避免「引用不变但内部属性重复赋值」的无效触发，可以保存上次的快照做深对比：

import config from "config.svelte";

let lastConfigSnapshot;

$effect(() => {
  const currentConfig = $state.snapshot(config);
  
  if (lastConfigSnapshot === undefined) {
    // 首次执行只记录初始快照
    lastConfigSnapshot = structuredClone(currentConfig);
    return;
  }

  // 对比当前与上次快照的所有属性
  const hasChanged = !Object.keys(currentConfig).every(key => {
    return currentConfig[key] === lastConfigSnapshot[key];
  });

  if (hasChanged) {
    console.log("config changed!");
    server_req("config", "POST", currentConfig);
    lastConfigSnapshot = structuredClone(currentConfig);
  }
});

注意点 #

• 原代码里 lastConfig 声明在 $effect 外面，只会在组件初始化时取一次值，后续不会更新，所以对比逻辑会失效——上面的方案把快照更新放在了 effect 内部，每次运行都会取最新值。
• 用 structuredClone 做深拷贝是为了应对嵌套对象的情况，如果你的 config 是扁平结构，也可以用 Object.assign({}, currentConfig) 浅拷贝。

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