For more details, see the original link:Vue- conceptual understanding
- Virtual DOM
- MVVM mode
- What is MVX mode
Vue.jsIs a set of building user interfaceProgressive framework.
Declarative renderingAndComponent systemIt is the content contained in Vue’s core library, andClient routing、State management、Building toolsThere are special solutions.
All logic should be done at the state level as much as possible. When the state changes, View should be automatically updated to a reasonable state with the help of the framework.
In Vue2.0, the implementation of rendering layer has made fundamental changes, that is, the introduction of virtual DOM.
Vue’s compiler compiles the templates into a rendering function after compiling them. When the function is called, it will render and return a.Tree of virtual DOM.
When we have this virtual tree, we will give it to another one.Patch function, responsible for the real application of these virtual DOM to the real DOM. In this process, Vue has its own responsive system to detect the data sources relied on in the rendering process. In the rendering process, after the detected data source, the changes in the data source can be accurately sensed. Then you can re-render as needed. After rendering again, a new tree will be generated, and the new tree will be compared with the old tree to finally arrive at the changes that should be applied to the real DOM. Finally, the patch function is used to make changes.
In Vue2.0 routing and some internal practices, a large number of rendering functions are used to make complex abstract components, such as transition animation components and link components in routing, which are all implemented by rendering functions, while maintaining its own dependency tracking system.
Vue’s Dependency Tracking Through ES5
Object.definePropertyMethod is implemented. For example, if we give it a native object, Vue will traverse the attributes of this data object and then convert the attributes. Each attribute is converted to a
setter. At the same time, each component will have a corresponding
watcherObject whose duty is to record which attributes on the data are used when the current component is rendered.
For example, when A.B is used in a rendering function, this will trigger the corresponding getter. The main points of the whole rendering process are as follows:
- Triggered when a data attribute is used
getterThis attribute will be treated as a dependency
- When the entire function is rendered, every data attribute used will be recorded.
- When the corresponding data changes, such as giving it a new value, it will trigger
setter, notify the data object corresponding data changes.
- At this time, the corresponding component will be notified that its data dependency has changed and needs to be re-rendered.
- The corresponding component transfers the rendering function again to generate
Virtual DOMImplementation of
In Vue, communication between parent and child components is passed through props. One-way transfer from parent to child; However, if the child component wants to produce side effects in the parent component, it needs to dispatch the event. This forms a basic father-son communication mode.
There is an important function called
deep-linking, that is, when the user browses to a URL and then passes it to another person or copies it to reopen, the application needs to directly render the state corresponding to the URL. This means that there is a mapping relationship between the application URL and the state of the component tree. The responsibility of client routing is to make this mapping relationship declaratively correspond.
With Webpack, lazy loading based on routing can also be realized. Components corresponding to one path will be separated into another block when being packaged, and will be loaded only when the route is accessed.
These three things in the figure are one-way data flow.
ViewThe rendering of, while the user to
ViewCarry out operation generation
Action, will make
StateTo produce changes that lead to
npm install -g vue-cli vue init webpack-simple my-app cd my-app npm install npm run dev
The data structure corresponding to the real DOM is generated in memory, and the structure generated in memory is calledVirtual DOM.
Vue.jsIs one that provides
MVVMStyle of two-way data binding
ViewThe floor. Its core is
MVVMhit the target
VM, that is to say
ViewModelResponsible for connection
ModelThis lightweight architecture makes front-end development more efficient and convenient.
Vue bidirectional binding principle
Vue.js is adoptedObject.definePropertyThe
Object.definePropertyTurn them into
getter/setter. Users cannot see
getter/setterBut internally they let Vue track dependencies and notify changes when attributes are accessed and modified.
Observer data listener, can monitor all attributes of the data object, if there is any change can get the latest value and notify subscribers, internal use
Compile instruction parser, its role is to scan and analyze the instructions of each element node, replace data according to instruction templates, and bind corresponding update functions.
Watcher subscriberAs a connection
CompileThe bridge, can subscribe to and receive notification of each attribute change, and execute the corresponding callback function bound by the instruction.
Dep message subscriber, internally maintains an array to collect subscribers (
Watcher), data change trigger
notifyFunction, and then call the subscriber’s
new Vue()On the one hand, Vue will traverse
dataOption and use the
Object.definePropertyTurn them into
getter/setterTo realize data change monitoring function; Vue’s instruction compiler, on the other hand
CompileScanning and analyzing the instructions of element nodes, initializing views, and subscribing
WatcherTo update the view, at this time
WatherWill add itself to the message subscriber (
Dep), initialization is complete.
When the data changes,
Observerhit the target
setterThe method is triggered,
DepStart traversing all subscribers and call the
updateMethod, the subscriber updates the view accordingly after receiving the notification.