It also should be noted that the browser does NOT immediately
console.log when you call it (it sorta waits when it has time to do so, a queue if you will). It all just happens so fast (as Linus mentioned) you dont see this.
Heres the thing. At that point in time, an object exists… this object is called the $refs object. When you print that out to the console, the browser has a refernece to it. At that point in time though, it is empty. The browser has NOT actually printed anything yet. Your next line, you send to the browser asking to print a key/value which still does not exist. It returns undefined… it is not a reference to an object, it is undefined. The browser STILL has not printed anything yet.
So what do we have at this point in time queued on our “stack” ? print a refernece to an object ($ref) and print a primitive (undefined) However, now the component has finished loading and has loaded your lazy loaded component… Now that object ($refs) has the key/value filled in
And arbitrarily the browser has found time to actually send the content to the console to display. Since the object we’re printing is a reference, we see it filled in.
The console is not an accurate representation of “time” if thats how you want to look at it.