Difference between @Track, @api and @wire LWC decorators

In Salesforce Lightning Web Components (LWC), the wire decorator pulls data from server-side controllers or Apex methods straight into a component property. When the method returns data, the component rerenders on its own to show the new values. It is one of the three core decorators in LWC, alongside track and api.

The track decorator

The track decorator watches a property's value inside the component. Whenever the value of a tracked property changes, the component rerenders and shows the updated value.

import { LightningElement, track } from 'lwc';

export default class ExampleComponent extends LightningElement {
  @track greeting = 'Hello';

  handleChange(event) {
    this.greeting = event.target.value;
  }
}
    

The wire decorator

The wire decorator fetches data from server-side controllers or Apex methods. The data the method returns lands in the component's property, and the component rerenders with it.

import { LightningElement, wire } from 'lwc';
import getContacts from '@salesforce/apex/ContactController.getContacts';

export default class ContactList extends LightningElement {
  @wire(getContacts) contacts;
}
    

The api decorator

The api decorator exposes a component's property or method to the parent component, so the parent can read that property or call that method.

import { LightningElement, api } from 'lwc';

export default class ExampleComponent extends LightningElement {
  @api message = 'Hello World';
}
    

Summary

So: track watches a property's value inside the component, wire retrieves data from server-side controllers or Apex methods, and api exposes a component's property or method to the parent component. Between them they cover what a component property usually has to do: react to its own changes, receive server data, and be reachable from the parent.