We could use this.recordId in wired getRecord function because properties are already reactive in LWC.
@wire(getRecord, { recordId: this.recordId, fields: FIELDS })
contact;
So what benefit is to use '$recordId'?:
@wire(getRecord, { recordId: '$recordId', fields: FIELDS })
contact;
From Understand the Wire Service:
We call the wire service reactive in part because it supports reactive variables, which are prefixed with
$. If a reactive variable changes, the wire service provisions new data. We say "provisions" instead of "requests" or "fetches" because if the data exists in the client cache, a network request may not be involved.
Crucially:
If a reactive variable changes, the wire service provisions new data.
@api and @track annotations explicitly)
The term "reactive" applies to redrawing the UI/templates every time a reactive variable is modified.
Variables are not reactive within the JavaScript short of using an explicit setter; this is how JavaScript (and most languages) work; there has to be some sort of syntax to let the runtime know that the variable needs to be tracked for other functions to be called.
The wire method uses $ to signify that it should set up a setter for the variable to be reactive for the wire method.
This is actually similar to how Svelte uses reactive variables in JavaScript. In Svelte, for example, you can write:
$: totalTodos = todos.length;
Whenever todos changes its length (via splice, push, pop, shift, unshift, or an assignment from slice, etc), Svelte automatically recalculates totalTodos.
We don't have this feature in LWC, but the concept is similar to how @wire methods operate. We label the property with $ to tell the wire method that it should listen for changes to this property and perform some server call in response.
Without the $, the string is just a normal string, and if you just use this.variableName, you only get one shot from the wire method (because it ends up looking like a string/number/whatever). We need this special symbol to make wire properties reactive.
