Decorators in LWC

 There are 3 decorators in LWC that add functionality to property or function.

@api

To expose a public property, decorate it with @api. Public properties are reactive. If the value of reactive property changes, the component rerenders.

@track

To track a private property`s value and rerender a component when it changes, decorate the property with @track. Tracked properties are also private reactive properties.

This @track decorator is No Longer Required for LWC

@wire

Components use @wire in there Javascript class to specify a wire adaptor or an apex method

For example: Demo.html

<template>

    <lightning-card title="Property Demo" icon-name="custom:custom54">

        <div>

            <lightning-input value={msgApi}

                label="Private property"

                onchange={handleChange}></lightning-input>

                <div>

                    Message is : {msgApi}

                </div>

        </div>

    </lightning-card>

</template>

Demo.js

import { LightningElement, api, track } from 'lwc';

export default class Demo extends LightningElement {

    @track message = "Reactive property";

    @api msgApi = "API property";

    handleChange(event){

        this.msgApi= event.target.value;

    }

}