Detecting Data Changes with Change Handlers

Configure a component to automatically invoke a change handler, which is 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 event has type="VALUE".

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

<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.

({
    itemsChange: function(cmp, evt) {
        console.log("numItems has changed");
        console.log("old value: " + evt.getParam("oldValue"));
        console.log("current value: " + evt.getParam("value"));
    }
})

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.