There are three decorators in lightning web components. These decorators add functionality to property or function.
- @api: To expose a public property, decorate this with @api. Public properties are reactive which means changes to the value of a reactive property will re-render the component and all the properties of that component will be recalculated. We can use that property in the parent component.
Syntax:
import { LightningElement, api } from 'lwc';
@api propertyName = 'api property value’';
Example:
@api firstName = ‘Webner’; - @track: Tracked properties are also known as private reactive properties which means we can use this property in that component only, we cannot expose this in the parent component. Track property is no longer in use. This is used only in the case of a list of objects or an array. When we want to re-render the component upon change of any value in the object list or in the array.
Syntax:
import { LightningElement} from 'lwc';
trackPropertyName = ‘track property value’';
Example:
lastName = ‘Demo’; - @wire: Components use @wire in their javascript class to specify a wire adapter or to invoke an Apex method. To invoke a property or a function of an apex class, decorate these with @wire. These are also reactive properties.
syntax:
import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';
@wire(apexMethod, { apexMethodParams })
propertyOrFunction;
Example:
@wire(getAccountList) accountList;