Svelte Store优化：仅在对象数据变更时触发set/订阅回调

问题场景 #

在Svelte中使用writable store时：

• 存储原始值（如字符串、数字）时，多次调用set传入相同值，subscribe回调只会在值真正变化时触发。
• 但存储复杂对象时，哪怕对象的所有属性完全一致，每次调用set都会触发subscribe回调。如果订阅中包含高开销的外部API调用，这种无意义的触发会造成性能浪费，需要解决。

已尝试的方案 #

通过闭包跟踪上一次的状态值，在调用set前先对比新旧值，只有当值真正变化时才更新store，并对外暴露封装后的操作API：

import { writable } from "svelte/store";

const initialContentState = {
  title: "",
  body: "",
};

const { subscribe, set } = writable(initialContentState);

const isQuestionEqual = (a, b) => {
    return a.title === b.title && a.body === b.body;
}

const initQuestionContentStore = () => {
    let prevValue = initialContentState;

    return {
        subscribe,
        reset() {
            set(initialContentState);
            prevValue = initialContentState;
        },
        setContent(content) {
            if (!isQuestionEqual(content, prevValue)) {
                set(content);
                prevValue = content;
            }
        }
    }
}

export const questionContentStore = initQuestionContentStore();

但这种手动跟踪状态的方式感觉不够优雅，虽然也可以用get从store获取当前值做对比，但Svelte文档明确指出，出于性能原因不推荐频繁使用get。

最优解决方案 #

1. 优化自定义封装逻辑（推荐） #

你的初始方案其实完全符合Svelte的最佳实践——通过自定义store封装状态更新逻辑，避免直接暴露原始的set方法，转而提供受控的更新API。可以做以下优化：

• 把状态跟踪逻辑和store初始化整合得更紧凑
• 确保所有更新操作（包括reset）都同步更新跟踪的前值
• 可以将对比逻辑抽离为通用工具函数，方便在多个store中复用

2. 封装通用的带相等性检查的writable #

如果需要在多个store中复用“仅值变化时更新”的逻辑，可以封装一个通用的工具函数：

import { writable } from "svelte/store";

export function writableWithEquality(initialValue, equals = (a, b) => a === b) {
    const { subscribe, set: originalSet } = writable(initialValue);
    let prevValue = initialValue;

    const set = (newValue) => {
        if (!equals(newValue, prevValue)) {
            originalSet(newValue);
            prevValue = newValue;
        }
    };

    const update = (updater) => {
        const newValue = updater(prevValue);
        set(newValue);
    };

    return { subscribe, set, update };
}

使用时只需传入自定义的相等性判断函数：

const initialContentState = { title: "", body: "" };
const isQuestionEqual = (a, b) => a.title === b.title && a.body === b.body;

export const questionContentStore = writableWithEquality(initialContentState, isQuestionEqual);

3. 使用第三方成熟库 #

如果不想手动实现，可以直接使用社区提供的库，比如svelte-store-equals，它内置了带相等性检查的store实现，开箱即用。

关键注意点 #

• 避免用get做值对比：get会触发store的订阅逻辑，频繁调用会带来不必要的性能损耗，而闭包跟踪前值的方式轻量且高效。
• 自定义store是Svelte推荐模式：通过封装API，你可以完全控制状态的更新逻辑，让代码更健壮、更易维护。

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