For more details, see the original link:Vue- conceptual understanding
Progressive framework
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.
Declarative rendering
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 ES5Object.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 agetterAnd onesetter. At the same time, each component will have a correspondingwatcherObject 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 dependencywatcherRecord it. - 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 ofDOMUpdate.
Component system
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.
Client routing
There is an important function calleddeep-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.
State management
These three things in the figure are one-way data flow.StateDriveViewThe rendering of, while the user toViewCarry out operation generationAction, will makeStateTo produce changes that lead toViewRe-render.
Building tools
npm install -g vue-cli
vue init webpack-simple my-app
cd my-app
npm install
npm run dev
Virtual DOM
The data structure corresponding to the real DOM is generated in memory, and the structure generated in memory is calledVirtual DOM.
MVVM mode
Vue.jsIs one that providesMVVMStyle of two-way data bindingJavascriptLibrary, focus onViewThe floor. Its core isMVVMhit the targetVM, that is to sayViewModel.ViewModelResponsible for connectionViewAndModelThis lightweight architecture makes front-end development more efficient and convenient.
Vue bidirectional binding principle
Vue.js is adoptedObject.definePropertyThegetterAndsetterAnd combines observer mode to implement data binding. When passing an ordinary Javascript object to the Vue instance as its data option, Vue will traverse its properties and use theObject.definePropertyTurn them intogetter/setter. Users cannot seegetter/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
Object.definePropertyThegetterAndsetterTo achieve.
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 connectionObserverAndCompileThe 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 triggernotifyFunction, and then call the subscriber’supdateMethods.
When executednew Vue()On the one hand, Vue will traversedataOption and use theObject.definePropertyTurn them intogetter/setterTo realize data change monitoring function; Vue’s instruction compiler, on the other handCompileScanning and analyzing the instructions of element nodes, initializing views, and subscribingWatcherTo update the view, at this timeWatherWill add itself to the message subscriber (Dep), initialization is complete.
When the data changes,Observerhit the targetsetterThe method is triggered,setterCalled immediatelyDep.notify(),DepStart traversing all subscribers and call theupdateMethod, the subscriber updates the view accordingly after receiving the notification.