Angular中@observable前缀是什么？其作用与适用场景解析

Hey there! Let's unpack what that @observable decorator does in your Todo class, and when you'd want to use it.

What is @observable? #

That @observable is a decorator from MobX—a popular state management library for JavaScript/TypeScript apps.

When you mark a class property with @observable, you're telling MobX to track changes to that property automatically. Any code that "depends" on this property (like React components that render it, or computed values derived from it) will react immediately when the property updates. You don't have to manually trigger re-renders or state syncs—MobX handles that heavy lifting for you.

Looking at your code snippet:

class Todo {
  id = Math.random();
  @observable title = "";
  @observable finished = false;
}

Here, title and finished are marked as observable. If you update a Todo instance's title or flip finished to true, any part of your app that uses those values will automatically update to reflect the change—no extra code required.

Common Use Cases for @observable #

• Centralized or Component-Local State Management: Use it for app-wide state (like user auth status, shopping cart contents) or component-local state that needs to be shared across multiple child components. MobX eliminates the hassle of manually syncing state and UI.
• Business Entity Models: For classes representing real-world entities (like your Todo, or User, Product), marking key properties as observable lets the model itself manage state changes. This keeps your business logic clean and tightly tied to the data it operates on.
• Pairing with Reactive Computed Values: When you have values derived from observable properties (e.g., a count of unfinished todos), pairing @observable with MobX's @computed decorator ensures the derived value updates automatically whenever the source observables change—no manual recalculation needed.
• Simplifying Async State Updates: When fetching data from an API, you can directly update observable properties once the data comes in. Any UI or logic dependent on those properties will refresh automatically, cutting out the need to handle state updates in async callbacks manually.

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