Track Decorator

 

The track decorator is used to track changes to a property’s value within a component. Whenever

the value of a tracked property changes, the component rerenders, reflecting the updated value.

import { LightningElement, track } from 'lwc';

export default class ExampleComponent extends LightningElement {

  @track greeting = 'Hello';

  handleChange(event) {

    this.greeting = event.target.value;

  }

}

Wire Decorator

The wire decorator is used to retrieve data from server-side controllers or Apex methods. The data returned by the method is stored in the component’s property, and the component rerenders with the new data.

import { LightningElement, wire } from 'lwc';

import getContacts from '@salesforce/apex/ContactController.getContacts';

export default class ContactList extends LightningElement {

  @wire(getContacts) contacts;

}

API Decorator

The api decorator is used to expose a component’s property or method to the parent component. This allows the parent component to access the property or method.

import { LightningElement, api } from 'lwc';

export default class ExampleComponent extends LightningElement {

  @api message = 'Hello World';

}