---
title: Data Listener
---


A data listener is used to listen for and respond to changes in any properties or data fields.

## Use a data listener

To set certain data fields by using `setData`, you need to perform some operations.

For example, set `this.data.sum` always to be the sum of `this.data.numberA` and `this.data.numberB`. In this case, you can use a data listener to implement the following operations:


```js
Component({
  attached: function () {
    this.setData({
      numberA: 1,
      numberB: 2,
    });
  },
  observers: {
    'numberA, numberB': function (numberA, numberB) {
      // Execute this function when numberA or numberB is set
      this.setData({
        sum: numberA + numberB,
      });
    },
  },
});
```

## Syntax for field listening

A data listener can simultaneously listen for the changes in multiple properties or internal data. A listener can only be triggered one time by a `setData` operation.

Moreover, listeners can listen for sub-data fields, as shown below.

```js
Component({
  observers: {
    'some.subfield': function (subfield) {
      // Triggered when this.data.some.subfield is set via setData
      // (Also triggered when this.data.some is set via setData)
      subfield === this.data.some.subfield;
    },
    'arr[12]': function (arr12) {
      // Triggered when this.data.arr[12] is set via setData
      // (Also triggered when this.data.arr is set via setData)
      arr12 === this.data.arr[12];
    },
  },
});
```

You can use a wildcard `**` to listen for changes in all sub-data fields.

```js
Component({
  observers: {
    'some.field.**': function (field) {
      // Triggered when setData is used to set this.data.some.field itself or any of its sub-data fields
      // (Also triggered when this.data.some is set via setData)
      field === this.data.some.field;
    },
  },
  attached: function () {
    // The above observer will be triggered
    this.setData({
      'some.field': {
        /* ... */
      },
    });
   // The above observer will also be triggered
    this.setData({
      'some.field.xxx': {
        /* ... */
      },
    });
   // The above observer will still be triggered
    this.setData({
      some: {
        /* ... */
      },
    });
  },
});
```

In particular, you can simply use the wildcard `**` to listen for all `setData`.


```js
Component({
  observers: {
    '**': function () {
      // Triggered upon each setData operation
    },
  },
});
```

## Things to note

- Data listeners are used to listen for the data fields that are set via `setData`. Even if the values of these data fields do not change, the data listeners will still be triggered.
- Please note that, if you use `setData` to set the monitored data fields in the data listener function, this can create an infinite loop.
- Compared to a property `observer`, a data listener is more powerful with better performance.