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

In Lightning Web Components (LWC), the wire decorator pulls data from server-side controllers or Apex methods directly into a component property. Once the method returns data, the component automatically rerenders to display the new values. It is one of 3 core decorators alongside track and api that handle component properties.

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.