1, MVVM
First, we don’t care about the structure of the DOM, but how the data is stored.
The core of MVVM is data-driven ViewModel, which is a relational mapping of View and Model. The essence of MVVM is to operate the View and then operate DOM based on the operation data. With the help of MVVM, there is no need to operate DOM directly. Developers only need to write business in the ViewModel, making the View fully automated
Focus on Model changes and let the MVVM framework automatically update the DOM state, freeing developers from the tedious process of manipulating the DOM
SPA single-page
Vue life cycle
v-if/v-show
Vue one-way data flow
Vue component communication
SSR
Vue routing
Vue project optimization
Virtual dom
In the web page, the biggest resource cost of the browser is DOM node. DOM is slow and very large, and most of the performance problems of the web page are caused by JavaScript modification of DOM. We use Javascript to manipulate the DOM, which is often inefficient. Because the DOM is represented as a tree, something in the DOM changes every time, so changes to the DOM are very fast, but the changed element, and its children, must go through the Reflow/Layout stage. The browser must then redraw the changes so the more times you backflow/redraw, the more your application will stall.
However, Javascript is fast, and the virtual DOM is a layer that sits between JS and HTML. It can compare the old and new DOM to obtain the difference object after comparison, and then specifically render the difference part on the page, thus reducing the actual DOM operation, and ultimately achieve the purpose of performance optimization.
Realize the principle of
Use JavaScript to simulate the DOM tree, and render the DOM tree to compare the new and old DOM trees, to get the comparison of the difference object diff algorithm – compare the difference between two virtual DOM trees pach algorithm – the difference between two virtual DOM objects is applied to the real DOM tree. Finally, the difference object is applied to the rendered DOM tree.