Whats the difference between @observable and @ observable .ref modifiers in mobx?

在 mobx 中，@observable 和 @observable.ref 是两种用于定义观察的状态的修饰符，它们主要的区别在于它们如何响应数据的变化。

@observable

@observable 修饰符用于使得一个属性变成可观察的。当使用 @observable 修饰对象属性时，MobX 会对这个对象的属性进行深度观察。这意味着，如果属性值是一个对象或数组，那么这个对象或数组内部的变化也会触发观察者的反应。简单来说，@observable 是深度观察。

例子：

javascript
import { observable } from 'mobx';

class Store {
    @observable person = {
        name: 'John',
        age: 30
    };
}

const store = new Store();

autorun(() => {
    console.log(store.person.name);  // 当person.name变化时，这里会重新运行
});
store.person.name = 'Jane';  // 触发autorun

@observable.ref

与 @observable 不同，@observable.ref 不会对对象或数组进行深度观察，而只关注对应属性引用的变化。即只有当整个对象或数组的引用发生变化时，观察者才会被触发。这对于性能优化是有益的，特别是当你处理大型对象或数组，而你只关心引用更改而非内容更改的时候。

例子：

javascript
import { observable } from 'mobx';

class Store {
    @observable.ref person = {
        name: 'John',
        age: 30
    };
}

const store = new Store();

autorun(() => {
    console.log(store.person.name);  // 初次会运行
});

store.person = { name: 'Jane', age: 30 };  // 触发autorun，因为person的引用变了
store.person.name = 'Doe';  // 不会触发autorun，因为只是属性内部的更改

总结

选择 @observable 还是 @observable.ref 主要取决于你的具体需求：

• 如果你需要观察一个对象内部的变化，使用 @observable。
• 如果你只需要追踪对象或数组引用的变化，使用 @observable.ref，这通常用于性能优化的场景。