What are Decorators in a Lightning Web Component?

Three decorators are available in the Lightning Web Components programming model to extend the functionality of a property or function. Decorators change a property or function's functionality on the fly. Although ECMAScript includes the ability to build decorators, these three decorators are specific to Lightning Web Components. 

1. @api: Decorate a public property with @api to make it visible. The API for a component is defined by its public attributes. The public properties of a component can be accessed by an owner component that uses it in its markup. Public spaces are responsive. Any content that mentions a reactive property in the component's template is rendered again if its value changes. 
2. @track: Decorate a private property with @track to keep track of its value and redraw a component as it changes. Private reactive properties are another name for tracked properties. 
3. @wire: Lightning web components employ a reactive wire service to read Salesforce data. The component re-renders when the wire service provisions data. Components can define a wiring adaptor or an Apex method by using the JavaScript class variable @wire. 

Here are three decorators in LWC in more detail:

@api Decorator in LWC

Public properties are reactive. The component will re-render whenever the value of public property changes. Add the @api symbol to a field to make it visible to the public. The API for a component is defined by its public attributes. 

Decorate a method with @api to make it public. Public methods are a part of an API for a component. Owner and parent components can invoke JavaScript methods on child components to communicate with each other lower in the confinement hierarchy. 

apiDecorator.html 

<template> 
    <lightning-card title=" API Decorators Example"> 
        <div class="slds-m-around_medium"> 
            <p>Message , {inputMessage}!</p> 
            <lightning-input label="Message" value={inputMessage} onchange={handleChange}></lightning-input> 
        </div> 
    </lightning-card> 
</template>

apiDecorator.js 

import 
{ 
    LightningElement,api 
} 
from 'lwc'; 
export default class ApiDecorator extends LightningElement 
{ 
    @api inputMessage = 'World'; 
    handleChange(event) 
    { 
        console.log('event.target.value' + event.target.value); 
        this.inputMessage = event.target.value; 
    } 
}

Output  

Don't forget to check out: What is Salesforce Lightning Web Component and How to Use it?

@track Decorator in LWC

Fields are reactive. If the value of a field changes and the field is used in a template or in a getter of a property that is used in a template, the component redraws and updates the value to reflect the new value. 

@track has only one application. The depth of changes that are tracked is limited when a field contains an object or an array. Decorate the field with @track to instruct the framework to keep track of changes to object properties or array items. 

trackDecorator.html 

<template> 
    <lightning-card title="Track Decorators Example"> 
        <div class="slds-m-around_medium"> 
           <lightning-input value={message}  
            label="Private Property" 
            placeholder="enter your input here" 
            onchange={handleChange}></lightning-input> 
        <div> 
            message is : {message} 
        </div> 
        </div> 
    </lightning-card> 
</template>

trackDecorator.js 

import 
{ 
    LightningElement,track 
} 
from 'lwc'; 
export default class TrackDecorator extends LightningElement 
{ 
    @track inputMessage = 'World'; 
    handleChange(event) 
    { 
        console.log('event.target.value' + event.target.value); 
        this.inputMessage = event.target.value; 
    } 
}

Check out another amazing blog by Narendra Kumar here: How to Call the Apex Method Imperatively in Lightning Web Component?

@wire Decorator in LWC

Lightning web components employ a reactive wire service to read Salesforce data. The component re-renders when the wire service provisions data. Components can define a wire adapter or an Apex method by using the JavaScript class variable @wire. 

wireDecorator.html 

<template> 
    <lightning-card title="Decorators Demo"> 
        <div class="slds-m-around_medium"> 
            <p>Message , {inputMessage.data}!</p> 
            <lightning-input label="Message" value={inputMessage} onchange={handleChange}></lightning-input> 
        </div> 
    </lightning-card> 
</template>

wireDecorator.js 

import 
{ 
    LightningElement, 
    api,wire 
} 
from 'lwc'; 
import getInputMessage from '@salesforce/apex/Message.getInputMessage'; 
export default class Hello2 extends LightningElement 
{ 
    @api inputMessage = 'World'; 
    @wire(getInputMessage) inputMessage; 
    handleChange(event) 
    { 
        console.log('event.target.value' + event.target.value); 
        this.inputMessage = event.target.value; 
    } 
}

wireDecorator.cls 

public with sharing class Message 
{ 
     @AuraEnabled(cacheable=true) 
    public static String getInputMessage() 
    { 
        return 'Input Message from Apex Class'; 
    } 
}

Output