Detecting Data Changes with Change Handlers

When the value changes, the valueChange.evt event is automatically fired. The event has type="VALUE".

In the component, define a handler with name="change".

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

The value attribute sets the component attribute that the change handler tracks.

The action attribute sets the client-side controller action to invoke when the attribute value changes.

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        console.log("numItems has changed");
4        console.log("old value: " + evt.getParam("oldValue"));
5        console.log("current value: " + evt.getParam("value"));
6    }
7})

The valueChange event gives you access to the previous value (oldValue) and the current value (value) in the handler action.

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.