A good example of this happening is the window alert function. alert("Hello World")
You can’t interact with the webpage at all until you hit OK and dismiss the alert. You’re stuck.
Let’s look at a simple example, run this code your console:
Feels odd, right? Well, let’s break this down line by line:
There’s a really good site that slows this all down and shows this happening.
At some point during the event loop, the runtime starts handling the messages on the queue, starting with the oldest one. To do so, the message is removed from the queue and its corresponding function is called with the message as an input parameter. As always, calling a function creates a new stack frame for that function’s use.
The processing of functions continues until the stack is once again empty. Then, the event loop will process the next message in the queue (if there is one),so some of event loop’s task is clear queue & stack.
Each message is processed completely before any other message is processed.
This offers some nice properties when reasoning about your program, including the fact that whenever a function runs, it cannot be pre-empted and will run entirely before any other code runs (and can modify data the function manipulates). This differs from C, for instance, where if a function runs in a thread, it may be stopped at any point by the runtime system to run some other code in another thread.
A downside of this model is that if a message takes too long to complete, the web application is unable to process user interactions like click or scroll. The browser mitigates this with the “a script is taking too long to run” dialog. A good practice to follow is to make message processing short and if possible cut down one message into several messages.
In web browsers, messages are added anytime an event occurs and there is an event listener attached to it. If there is no listener, the event is lost. So a click on an element with a click event handler will add a message—likewise with any other event.
A web worker or a cross-origin iframe has its own stack, heap, and message queue. Two distinct runtimes can only communicate through sending messages via the postMessage method. This method adds a message to the other runtime if the latter listens to message events.
In a traditional app that is not using client-side routing,the browser is essentially going out and fetching the different content that we need from those different urls
With a Single Page Application,we’re really only looking at one page,the index.html,and as we click around in it, we’re adjusting which view we’re seeing of that app, hence we call it a single page application, because all of these pages come from that one index.html page.
【router-view】 is a placeholder replaced by route’s component
In client-side routing,when navigation happens, Vue with the help of Vue router compares and renders the differences without ever having to reload the page
Q:What is One-Way Data Flow
A: All props form a one-way-down binding between the child property and the parent one:when the parent property updates,it will flow down to the child,but not the other way around.This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.
At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it displays message in reverse. The problem is made worse when you want to include the reversed message in your template more than once.That’s why for any complex logic, you should use a computed property.Computed property is much more like a function,but what’s the difference? For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as message has not changed, multiple access to the reversedMessage computed property will immediately return the previously computed result without having to run the function again.In comparison, a method invocation will always run the function whenever a re-render happens.
A route object represents the state of the current active route. It contains parsed information of the current URL and the route records matched by the URL.The route object is immutable.Every successful navigation will result in a fresh route object
0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 A 10 B 11 C 12 D 13 E 14 F 15 G 16 H 17 I 18 J 19 K 20 L 21 M 22 N 23 O 24 P 25 Q 26 R 27 S 28 T 29 U 30 V 31 W 32 X 33 Y 34 Z 35 36 (space) $ 37 % 38 * 39 + 40 - 41 . 42 / 43 : 44