W rain or shine w
-
VUE Learning Notes (III) Detailed explanation of Vue rendering process To render a piece of content in Vue, there will be the following steps and processes: Step 1, parse the syntax, generate AST Step 2, complete the data initialization step 3 according to the AST results, generate a virtual DOM according to the AST results and DATA data binding situation Step 4, generate a real DOM from the virtual DOM into the page for page rendering. How to understand this process? The AST syntax tree is actually an Abstract Syntax Tree, which refers to mapping the statements in the source code to each node in the tree by constructing a syntax tree. DOM structure tree is also a kind of AST, which parses HTML DOM syntax and generates the final page. original 2023-05-07 21:32:40 · 3390 Reading· 2 Comments -
VUE Learning Notes (II) Deep Understanding of VUE The template engine is the most important and core capability in Vue. Before the template engine appeared, we updated the content of the page. The general process is: listening operation ->obtaining data variables ->splicing data into HTML templates ->stuffing HTML content to the corresponding place of the page ->binding the clicks and other events that need to be listened in the HTML fragment. Vue will first change the data into a virtual DOM. If the data changes, use the Diff algorithm for comparison. If the new virtual DOM has the same DOM as the old virtual DOM, it will be directly reused, which can greatly improve efficiency. Especially when processing forms, Vue's two-way data binding is very convenient. original 2023-05-07 16:03:44 · 769 Reading· 0 Comments -
VUE Learning Notes (I) Construction of Development Environment Currently, Debugger for Chrome is in a legacy state. It is not recommended to use it. It is recommended to install JavaScript Debugger (Nightly). E、 The running result shows that the localhost cannot access this website and refuses the connection request, as shown in the following figure. C、 Go to the "Run and Debug" menu and find the start button (green button at the top of vscode); Click the download button directly, and the appropriate version will be automatically downloaded according to the system, without the need to choose. Step 1: Open the extension interface (ctrl+shift+x), enter and search. D、 Set breakpoints at the number of lines of code to debug; original 2023-04-15 21:44:39 · 777 Reading· 0 Comments