Function watch

Watches a property for changes. This can be a property on the given object or a property on a nested object if the nested object is also observable.

This function will return a handle that can be used to stop watching the property.

The callback will be invoked with the new value, old value, and the target object when the property changes. The target object is the object that contains the property that changed.

The callback will not be invoked if the value has not changed. This includes if a parent property changes but the resulting value is the same as the previous value.

If any property in the path can be undefined, the callback will be invoked with an undefined newValue and an undefined target when a parent property changes to undefined.

If the property throws an exception during watch setup, the first callback invocation will be invoked with oldValue and newValue having the same value.

class MyObservable extends observable() {
    private _backingFieldForGetter = "backingFieldForGetter";
    dataProperty: string = "dataProperty";

    get getter() {
      return this._backingFieldForGetter;
    }
}

const myObservable = new MyObservable();
watch(myObservable, "getter", (newValue, oldValue) => {});
watch(myObservable, "dataProperty", (newValue, oldValue) => {});

class MyClass extends observable() {
   private _backingFieldForAccessor = new MyObservable();

   get getterSetter {
     return this._backingFieldForAccessor;
   }
   set getterSetter(value: MyObservable) {
     this._backingFieldForAccessor = value;
   }
}

const myClass = new MyClass();
watch(myClass, "getterSetter", (newValue, oldValue) => {});
watch(myClass, "getterSetter.getter", (newValue, oldValue) => {});
watch(myClass, "getterSetter.dataProperty", (newValue, oldValue) => {});
Copy