Detecting Data Changes

Automatically firing an event

You can configure a component to automatically invoke a client-side controller action when a value in one of the component's attributes changes. When the value changes, the valueChange.evt event is automatically fired. The valueChange.evt is an event with type="VALUE" that takes in two attributes, value and index.

Manually firing an event

In contrast, other component and application events are fired manually by event.fire() in client-side controllers.

For example, in the component, define a handler with name="change".

1<aura:handler name="change" value="{!v.items}" action="{!c.itemsChange}"/>

A component can have multiple <aura:handler name="change"> tags to detect changes to different attributes.

In the controller, define the action for the handler.

1({
2    itemsChange: function(cmp, evt) {
3        var v = evt.getParam("value");
4        if (v === cmp.get("v.items")) {
5        //do something
6        }
7    }
8})

When a change occurs to a value that is represented by the change handler, the framework handles the firing of the event and rerendering of the component. For more information, see aura:valueChange.