Javascript Decorators of Lightning Web Component

Hi ,

Decorators add functionality to property or function. The ability to create decorators is part of ECMAScript, but the following decorators are unique to Lightning Web Components.

• @track
• @api
• @wire

@track

Private properties that contain a primitive value are reactive. If a reactive property is used in a template and its value changes, the component re-renders.

If a private property contains an object, to mark is as reactive, annotate it with @track. LWC tracks changes on the object's properties. If a property is used in a template and its value changes, the component re-renders.

@api




To expose a public property, decorate it with @api. Public properties define the API for a component. To communicate down the component hierarchy, an owner component can access and set a child component’s public properties.

Public properties are reactive. If the value of a reactive property changes, the component’s template renders any content that references the property. For more information, see Public Properties.To expose a public method, decorate it with @api.

Public methods also define the API for a component. To communicate down the component hierarchy, owner and parent components can call JavaScript methods on child components.

@wire

It will be used to read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adapter or an Apex method.

Referece:

https://lwc.dev/guide/reference#%40api