The overall architecture of Vue.js can be broken down into the following parts:
Article Directory
1. Data-driven
A core feature of Vue is data-driven. Vue will provide an observe monitor for the data when it is initialized. When the data changes, it will change in turn to trigger the re-rendering of the DOM. Vue is driven by data, allowing us to focus on business logic without having to consider DOM operations.
2. Componentization
Another core feature of Vue is componentization. Componentization can improve the reusability of code, and at the same time, it can conveniently manage the relationship between components. Vue's components use a tree structure, and each component has its own state and behavior, and can communicate with each other when needed.
3. Responsive system
Vue's reactive system is fundamentally data-driven. Vue monitors all data changes so that the view can be updated immediately when the data changes. Vue uses ES6's Proxy and Reflect to implement a responsive system.
4. Virtual DOM
Vue's virtual DOM is created to improve page rendering efficiency. Virtual DOM is a lightweight JavaScript object that contains the structure of the DOM tree, but is not actually rendered to the browser. When Vue needs to update the DOM, it will only update the parts that need to be updated by comparing the difference between the old and new virtual DOM, thereby improving the efficiency of page rendering.
5. Plug-in system
Vue provides a plug-in system that allows developers to encapsulate some commonly used components and instructions for easy sharing in different projects. Vue's plugin system is implemented based on global API and MIXIN.
6. Single file components
Vue's single-file components use the latest ES6 standard and adopt a modular approach. Each single-file component consists of three parts: templates, scripts, and styles, all of which can be imported and exported using ES6's module import and export syntax.
7. Template compilation
Vue's template compilation can compile HTML templates into Vue's rendering functions. Vue's template compilation supports basic instructions, expressions, and event binding, which can help us simplify code and improve development efficiency.
Summarize
The overall architecture built by Vue is very powerful, including data-driven, componentized, responsive systems, virtual DOM, plug-in systems, single-file components, and template compilation. These features allow developers to focus on the development of business logic without having to consider too many DOM operations and browser compatibility issues.