数字类型上的@observable不能创建可观察的

Question

When trying to use @observable on a numeric type it doesn't create an Observable. This causes the problem where the computed value gets recalculated every time it is fetched. I don't want the computed value to get recalculated unless the inputs have changed, what is the problem here?

https://jsbin.com/mofirujixu/1/edit?html,js,console

class Square {
  @observable width = 2;

  @computed get area() {
    console.log('calc area');
    return this.width * this.width;
  }
}

const square = new Square();
//prints out 'calc area' each time
console.log(square.area);
console.log(square.area);
console.log(square.area);

Answer 1

MobX only caches the resulting value of a computed if it is being observed by one or more observers. It is implemented this way to decrease memory footprint and to allow the garbage collector to do its job.

You could use a simple autorun before the logs to see this in action:

class Square {
  @observable width = 2;

  @computed get area() {
    console.log('calc area');
    return this.width * this.width;
  }
}

const square = new Square();

autorun(() => {
  square.area;
  // square.area is now observed by one observer, 
  // and will not be re-calculated for subsequent reads.
});
console.log(square.area);
console.log(square.area);
console.log(square.area);