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.defineProperty
Method 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 agetter
And onesetter
. At the same time, each component will have a correspondingwatcher
Object 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
getter
This attribute will be treated as a dependencywatcher
Record 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 DOM
Implementation ofDOM
Update.
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.State
DriveView
The rendering of, while the user toView
Carry out operation generationAction
, will makeState
To produce changes that lead toView
Re-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 providesMVVM
Style of two-way data bindingJavascript
Library, focus onView
The floor. Its core isMVVM
hit the targetVM
, that is to sayViewModel
.ViewModel
Responsible for connectionView
AndModel
This lightweight architecture makes front-end development more efficient and convenient.
Vue bidirectional binding principle
Vue.js is adoptedObject.definePropertyThegetter
Andsetter
And 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.defineProperty
Turn them intogetter/setter
. Users cannot seegetter/setter
But 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.defineProperty
Thegetter
Andsetter
To 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 connectionObserver
AndCompile
The 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 triggernotify
Function, and then call the subscriber’supdate
Methods.
When executednew Vue()
On the one hand, Vue will traversedata
Option and use theObject.defineProperty
Turn them intogetter/setter
To realize data change monitoring function; Vue’s instruction compiler, on the other handCompile
Scanning and analyzing the instructions of element nodes, initializing views, and subscribingWatcher
To update the view, at this timeWather
Will add itself to the message subscriber (Dep
), initialization is complete.
When the data changes,Observer
hit the targetsetter
The method is triggered,setter
Called immediatelyDep.notify()
,Dep
Start traversing all subscribers and call theupdate
Method, the subscriber updates the view accordingly after receiving the notification.