preamble
writevue3 Compilation Principles RevealedWhen the eBook was released, I realized that a number of fans were still dumbfounded as to what is compile time? What is runtime? In this article, we're going to make sure you understand the difference between compile time and runtime.
Follow the public number: [Front-end Ouyang], give yourself a chance to advance vue
compile-time
I willcompilingThis term is understood asrenderingWhat does that mean?
Let's say you're trying to communicate with a foreigner and your English is super crappy. So you speak Chinese, but the foreigner only understands English. How can the two of you communicate then? So you need a translator to convert the Chinese you're speaking into English so the foreigner can understand what you're saying,...This translation process is what we often refer to as compile-time。
After reading the last example if you didn't understand it, let's look at another onevueThe example of the We usually writevueWhen code is written it is usually written in a file with a suffix of.vuefile, officially known as a Single File Component (SFC).
But browsers recognize the suffix.vueSingle File Component (SFC)?
Obviously browsers don't recognize it, so this is the time to suffix the.vue(SFC) is compiled (translated) into a browser-recognizable js file.This process is what we often refer to as compile-time。
In the front-end, generallycompile-timeIt's the code that runs on theof the stage.
We all know that the front-end is divided into two main environments: the production environment and the development environment.
-
For production environments, the
compile-timeIt's the process of executing something likeyarn buildThe process of packaging the source code into code that can be executed directly by the browser. The code files generated by packaging are stored on disk, and the process is performed in theThe completion of the -
For the development environment, the
compile-timeIt is the execution of the typeyarn devThis startup command, the same process of compiling the source code into code that can be directly executed by the browser. Unlike the production environment, the generated code files are stored in memory and are not written to disk, again this process is done in theThe completion of the
runtime
neverthelessvueFor example, we all know that the browser's rendering process takes ahtmlfile rendered to the page. In the SPA single page the browser receives theIt usually looks like the following, as shown below:
As you can see from the image above the received html file contains only one<div id="app"></div>So how does the browser get the information from this emptydivWhat about rendering into colorful pages?
unfamiliarvueStudents of the source code should be more aware that the first step is to generate aappobject, and then call theapptargetmountmethod mounts the vue component object obtained after compile-time processing to the<div id="app"></div>Above.This process is known as the runtime.
For front-ends, the runtime is the stage where the code is executed in the browser.
Compiling in the browser
For those of you who are wondering, it seems that vue also provides a global build version. In this version, we can directly create a global build in thehtmlThe file uses thevueNo need to usewebpackorviteThis packing tool packs. For example, like the following:
As you can see from the figure above, there is no other way in this usage to use the*.vueReplace the filename with*.htmlOther than the filename, the writeup is basically exactly the same. In this usage since the build tool is not usedwebpackorviteAnd, of course, there's nothing in thecompilation time, how does the browser in this usage recognize a single file component (SFC) in the<template>、<script> cap (a poem)<style>What about modules such as?
The answer is in this globally built version ofvueA compiler is built into the If you run it in your browser and find the<template>、<script> cap (a poem)<style>and other modules are then compiled into browser-executable code using the built-in compiler.
That's why we said earlier: in generalcompile-timeIt's the code that runs on thestage. The unusual case is the current one, where vue has a compiler built right into it that compiles in the browser. But then again, this mode of compiling in the browser certainly doesn't perform as well as using the build toolwebpackorvitePackage your resources ahead of time.
summarize
In generalcompile-timeIt's the code that runs on thestages, such as the execution ofyarn devoryarn buildWhen the code is in theThe stage of execution in the browser. Later on, we talked about how the runtime is actually the stage where the code is executed in the browser.
Finally, we talked about one more special case, like the global build version of thevueThere will be a compiler built into the Allowing us to break away from thewebpackorviteutilizationvueThis is the mode of compiling in the browser, which of course is not as powerful as using a build tool.webpackorvitePackage your resources ahead of time.
Follow the public number: [Front-end Ouyang], give yourself a chance to advance vue
