13. The difference between assets and static
The same point: assets and static both store static resource files. The resource file pictures, font icons, style files, etc. required in the project can be placed under these two files, which is the same point
The difference: the static resource files stored in assets will be packaged and uploaded when the project is packaged, that is, when npm run build is run. The so-called simple packaging can be understood as compressed volume and code formatting. The compressed static resource files will eventually be placed in the static file and uploaded to the server along with index.html. Static resource files placed in static will not go through processes such as packaging, compression and formatting, but will directly enter the packaged directory and upload to the server directly.
Because it avoids compression and uploads directly, it will improve certain efficiency when packaging. However, since the resource files in static are not compressed and other operations are performed, the file size is larger than the packaged files in assets. It will take up more space in the server.
Suggestion: All the style files and js files required by the template in the project can be placed in assets, and go through the process of packaging. Reduce volume. The third-party resource files introduced in the project, such as iconfoont.css, can be placed in static, because these imported third-party files have been processed, and no longer need to be processed, they can be uploaded directly.
14. The difference between delete and Vue.delete delete array
delete only the deleted element becomes empty/undefined and the key values of other elements remain unchanged.
Vue.delete directly deletes the array and changes the key value of the array.
15. Principle of Vue template compilation
The template template in vue cannot be parsed and rendered by the browser, because this is not a browser standard, not correct HTML syntax, so it is necessary to convert the template into a JavaScript function, so that the browser can execute this function and render it The corresponding HTML elements can make the view run, and this transformation process is called template compilation. Template compilation is divided into three stages, parsing parse, optimizing optimize, generating generate, and finally generating the executable function render.
Parsing stage: Use a large number of regular expressions to parse the template string, and convert labels, instructions, attributes, etc. into abstract syntax tree AST.
Optimization stage: Traverse the AST, find some static nodes and mark them, so that when the page is re-rendered, these static nodes can be directly skipped when doing diff comparison, and the runtime performance can be optimized.
Generation phase: convert the final AST into a render function string.
16. Vue initialization page flickering problem
When developing with vue, before vue is initialized, because div is not under the control of vue, the code we write will easily appear blurred screen phenomenon before parsing, and see words similar to {{message}}, although Under normal circumstances, this time is very short, but it is still necessary to let this problem be solved.
First: Add the following code to the css:
If the problem is not completely solved, add style="display: to the root element
none;" :style="{display: 'block'}"