Decorators is feature in modern JS that allows adding some additional functionalities to properties and methods.
-using decorators in LWC we can define and modify the behaviour of components.
-The Lightening web components programming model has three decorators that add functionality to a property or function.
Types Of Decorators In LWC:
@api-This annotation is used to define a public property that can be accesses by other components.
-Public properties used in a template are reactive. If the value of a public property used in a template is changed the component renders.
-An Owner component that uses a component in its markup can access the components public properties via DOM properties.
-this allows passing data between components in a parent-child relationship or between unrelated components using Lightening Message Service.
-To communicate down the containment hierarchy owner and parent components can call JavaScript methods on child components.
@track: This annotation defines a reactive property that causes the components to re render when the property changes. (By default, all primitive data types are reactive in nature I mean we don’t need to track decorator to make it reactive.)
-this is useful when we need to update the components UI Based on change to property.
-If a field value changes and the field is used in a template or in a getter of a property that’s used in a template, the components rerenders and displays the new value.
-when a field is decorated with @track, lightening web components tracks changes of the internal values of:
- Plain objects created with {}
- Array created with [ ]
@wire: This Annotation is used to connect a component to an apex method or a wire adapter.
-To read salesforce data Lightning web Components use a reactive wire service. When service provisions data the Component rerenders.
-Components use @wire in their JavaScript Class to Specify a wire adapter or an Apex Method.
