请问Svelte全局Store与Mobx Store的具体差异是什么？

1. 定位与依赖 #

• Svelte Store 是 Svelte 自带的轻量状态方案，和框架编译机制深度绑定，不需要额外装包，核心就靠writable、derived、readable这几个简单函数就能跑起来。
• MobX 是独立于框架的通用状态库，能在 React、Vue、Svelte 等各种框架里用，得单独安装，靠自身的响应式引擎实现状态管理。

2. 响应式原理不一样 #

• Svelte Store：靠 Svelte 编译器的静态分析，编译时就确定组件和 Store 的依赖关系。运行时要么手动调用subscribe订阅，要么在组件里用$语法自动订阅，更新时直接通知订阅者，没额外的依赖追踪开销。
  举个例子：

  import { writable } from 'svelte/store';
  const count = writable(0);
  <!-- 组件里用$语法自动订阅 -->
  <p>{$count}</p>
  

• MobX：靠运行时动态追踪依赖，先用observable标记状态，再用observer包装组件，或者用autorun、reaction这类函数。只要被标记的状态变了，MobX 会自动重新运行依赖它的代码，不用手动订阅，依赖关系是动态建立的。
  举个例子：

  import { makeAutoObservable } from 'mobx';
  import { observer } from 'mobx-svelte';
  
  class Counter {
    count = 0;
    constructor() {
      makeAutoObservable(this);
    }
    increment() {
      this.count++;
    }
  }
  const counter = new Counter();
  <!-- 用observer包装组件，自动追踪状态 -->
  const CounterComponent = observer(() => <p>{counter.count}</p>);
  

3. 状态组织方式 #

• Svelte Store：一般是单个函数/对象的形式，偏向分散式管理，每个 Store 管一块小逻辑，没有强制的结构要求，怎么方便怎么来。
• MobX：推荐用类或可观察对象来组织状态，适合集中式或者按业务领域划分的管理模式，状态修改逻辑可以封装在类的方法里，处理复杂状态关联更顺手。

4. 修改状态的方式 #

• Svelte Store：writable类型的 Store 必须用set或update方法改状态，直接改原始值不会触发更新（除非用$语法的特殊处理）。

  count.set(1); // 直接设值
  count.update(n => n + 1); // 基于旧值更新
  

• MobX：只要是对observable标记的状态直接修改（比如counter.count++），自动就会触发更新，不用调用特定方法，跟平时写普通变量一样自然。

5. 衍生状态怎么处理 #

• Svelte Store：用derived函数创建衍生状态，得手动指定依赖的 Store 和计算逻辑，只有依赖变了才会重新计算，属于静态声明依赖。

  import { derived } from 'svelte/store';
  const doubledCount = derived(count, $count => $count * 2);
  

• MobX：衍生状态直接在类里写get方法就行，MobX 会自动追踪这个计算属性依赖的状态，状态一变衍生值自动更新，不用手动声明依赖。

  class Counter {
    count = 0;
    get doubledCount() {
      return this.count * 2;
    }
  }
  

6. 学习成本与适用场景 #

• Svelte Store：API 极少，几乎没学习成本，适合简单项目或者想保持代码轻量化的场景，不用搞懂复杂的响应式原理就能用。
• MobX：得理解可观察对象、观察者、依赖追踪这些概念，API 也更多（比如computed、reaction、runInAction），适合状态逻辑复杂的大型项目，功能更强但上手要花点时间。

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