1. vue Progressive
The hierarchical framework: View layer = "component mechanism =" Routing Mechanism = "Management Status =" build tool
That may be the most heart rendering of the view layer to development needs, other modules can be added according to demand.
2. change detection
Rendering: status = "DOM =" User Interface
vue response systems heavy frame rendering imparting ability, mainly due to changes in detection, i.e. the change detection data, when the data driver changes the view update
3. Object detection changes
Converting the property to Object.defineProperty form getter / setter to track changes triggered getter read data, when the trigger setter modification time; getter in collecting data which rely on the use, when the trigger setter, getter notification
Rely on data collected has changed; the collection depends stored in the Dep, Dep depend used to collect / remove the dependency / reliance to send a message; dependence, namely Watcher, only getter will depend on the collection Watcher trigger, which triggers Watcher
A getter, which put Watcher Dep collected in; when the data changes will depend circulation list, the Watcher will notify all again;
Watcher: first set up your own globally unique to the designated location, such as window.target, and then read the data, trigger getter, read the current regular reading data from the Watcher globally unique in that position in the getter, and this collection Watcher to
Dep; and in this way change the active subscription data;
ps: front will detect a certain attribute data, to detect all the properties, the class can be encapsulated Observer
Observer categories: convert all the data into a responsive object in the getter / setter, detects all changes in the data object; Data converted by the Observer form getter / setter tracking changes; read by the outside world Watcher
After Watcher receiving the notification, the notification is sent to the outside, a change notification to the outside; data, triggers getter thereby adding Watcher to dependence; when the data changes, it will trigger the setter, and thus send a notification to Dep Dependence touch
Hair view updates, may also trigger callback;
3. Array change detection
By tracking the change interceptor of Array: an array method of operation, which are performed interceptor provided a method of covering with Array.prototype interceptor, after each use of the Array prototype, as the push method, then the interceptor used
Native Array prototype of a method of operating an array;
Interceptor: Array.prototype the same object
Array prototype array can change their content methods: push / pop / shift / unshift / splice / sort / reverse
PS: Object defineReactive in dependence of the use of getter was collected Dep, each key has a corresponding list of Dep stores dependent (dependent on the getter collected, stored Dep dependent); dependency collected in the Array getter, the touch interceptor in
Made dependent, dependent on the stored Observer instance;
4. Virtual DOM
Declarative DOM operation: by describing the mapping between the state and the DOM, rendered view state, as Vue.js / Angular / React, when a status change update only DOM node associated with the state; such as the use of hidden Angular
Checking mechanism, React the virtual DOM, Vue1.0 using fine-grained binding (each binding Watcher will correspond to observe a state change, the memory overhead and reliance on large overhead, especially when the state is used more nodes) , vue2.0 mining
When played with medium velocity solutions, introduces a virtual DOM (the component level is a Watcher example, even if a component within the plurality of nodes using a certain state, and only a Watcher observe the changes in this state, status changes, only inform
To the component, compared with the internal components rendering) virtual dom.
Virtual DOM solution: generating a virtual node via a state tree, the tree node using the virtual rendering, before rendering, and the current virtual nodes on a tree node tree generated virtual contrast, only different portions rendering, the rendering of the virtual node
To view
Virtual component tree node tree that is set up virtual nodes vnode tree;
Module: Description mapping relationship between the state and the DOM, compiled from rendering module function, the rendering function executing virtual dom node tree obtained, rendering the view from the vnode Patch;
Virtual DOM do in vue.js of things: provide real dom dom node corresponding virtual nodes vnode; old vs. new virtual node, update view (compare the old and new virtual node is a virtual dom core algorithm patch, you can determine which nodes occur
Changes, only the node update the view changes);
ps: using virtual nodes to avoid unnecessary real dom to operate, saving performance overhead; Watcher size can be adjusted to reduce the number of dependent component level and number Watcher;
5. VNode
Vue.js presence VNode class, the class can be instantiated by vnode Examples of different types, examples of different types of vnode each represent different types of dom element; dom element has an element node / nodes text / comment nodes, the corresponding vnode example also
Similar nodes; the vnode is essentially a js object instantiated from the class VNode;
vnode：
Node describe the object, describes should be how to create real dom node;
vnode and views correspond, js DOM object version;
Type: comment node / text node / node element / node assembly / functional components / clone node (node slots and optimized static node)
vnode create real dom and render to view:
First Rendering = "create vnode, using the vnode generate real dom element, is inserted into the page rendering view;
Render again = "will be rendered on a cached vnode, the vnode for comparison vnode cache of newly created, based on local changes to modify the real dom;
ps: Reconnaissance policy with medium size, notification to the component level, the internal components using a virtual dom rendered views when the state changes; if a change in the state assembly, need to re-render the entire assembly;
6. patch
patching algorithm: the vnode rendered dom transactions; vnode compare different between old and new, is updated to identify the node needs to be updated by comparing the results, i.e., modifications to the existing dom to achieve the purpose of updating the view; dom reduction operation, lift
Performance; (dom js performed slower than fast speed; replacement is performed using the operation cost dom js computation cost;)
Objective: Modify dom node, rendering view (performed by modifying the existing differences between the old and new dom vnode comparison to achieve the purpose of the rendered view)
dom modify three things: create new node; deleting obsolete node; modify the node needs to be updated ; (when vnode and oldVnode not the same when it comes to rendering vnode whichever view)
Create a node:
When oldVnode does not exist, but there is vnode, directly vnode create elements and rendering views;
When the vnode is not completely oldVnode when the same node is required to generate real vnode dom element and which is inserted into view;
ps :( different one node in the dom vnode need to create a new node replacing the old node oldVnode corresponding to the newly created node dom inserted next to the old node, and delete the old node) (to create a corresponding type according to the type of vnode of
dom element, then the element into view)
Only three types of nodes will be created and inserted into the DOM: element nodes (with a tag attribute) --- comment node (isComment property) --- text node
Element node: Calling createElement method in the current environment to create a real element node, such as document.createElement browser environment; the elements are rendered view call appendChild method in the current environment, it may be an element
Into the assigned parent element, such as the Browser parentNode.appendChild (ps: child element node also need to create a corresponding out - recursion, it underneath)
Text node: createTextNode, as document.createTextNode
Comment nodes: createComment, such method document.createComment
Delete a node: if the vnode is not present, while oldVnode exists, delete it from the dom; removeNode removeVnodes
Update node: When oldVnode and vnode is the same node, is updated by comparing the old and new nodes to find not the same place;
1 first determines whether the node is static, is skipped, only render a follow-up static node is not updated;
2. The non-static node, determine whether text attributes: There are 21 text attributes directly call setTextContent method to view the contents of the dom node instead of the contents of the text property of virtual nodes, as in the browser node.textContent;.
(Beware of virtual nodes have text attributes and text attributes as the old virtual node is not the same as real dom directly to the content view changed to a new virtual node text)
22. The new virtual node has no text attributes, that is an element node, and then into whether there are children nodes: there are 221 children are divided into two cases: the old virtual node if there are children:. 2211 If the old virtual node has children
Further detailed comparison update, update or delete children may move or add a child node; 2212 if the old virtual node does not have children, then the old virtual node is an empty text label or a text node, if the text section
Point, to clear the text label becomes empty, then the virtual node sequentially created as children nodes and real dom element inserted into dom node view of the following; 222 children no case that the new node is a null node, directly
Old node will delete the puncturing to achieve the purpose empty tags;
2211 Update child nodes: update node - New node - delete nodes - Moving nodes position
Comparison of the two child nodes list, you first need to loop that new list of nodes, each node circulation to a new, old node went to find the old and the current node in the same node, if no node in the old, indicating that the current sub-node Yes
Due to changes in the new state node, the node to be created and inserted into the operational view, if you find the update operation, if the old node and the new node Found positions are different, the need to move the node; if the cycle is over,
Old node also remaining nodes are the nodes are the nodes to be deleted;
7. template compilation
Objective: generating a rendering function;
Rendering function effect: each execution it will use the latest state of the current generates a new vnode (can generate vnode reason - there are a lot of code string function call), then use this vnode continue rendering;
Template = "template compiler (resolver - optimizer - Code Generator) =" Render function
1. Template resolved into AST; AST marker 2. traversing static node; 3.AST generating rendering function
Parser: template parsed into AST, filter parser (analytical filter) ------ text parser - (resolved with variable text, plain text with variable needs to resolve) the HTML ----- parser (parsing template, whenever resolves to HTML
When the label start position / end position / or text annotations will trigger hook function, passing it the parameter information) via a main line (HTML parser monitor whenever the trigger hook AST node generates a corresponding raw
Prior to AST will be generated based on different ways to use different types of AST) These parsers are assembled together; when htnl parser finished parsing all the templates on the AST generated good;
Optimizer: traversing AST, and detects the mark, does not require re-rendering all static subtree; avoid wasted effort to improve performance;
Code generator: AST converted into content rendering function, i.e., the code string;
When the final code string export outside use, will be in the code string into a function that is rendering function; when rendering function to export to the outside of the template compilation to complete the task.
8. parser
The template resolves AST; AST in JavaScript object that is used to describe a node, a node represents an object, object attribute is used to save various data required for the node; (node tree with a description of the object that is AST)
Role is to parse html parser html, html parsing process will continue to trigger a variety of hook functions, such as start tag hook function - the end hook function - Text hook function - Notes hook function;
<Div> <p> ha </ p> </ div>
The parser is parsed from front to back, to resolve the <div> tag will trigger the start of a hook function start, resolve to <p> will trigger the start again; to resolve Haha text text trigger hook function chars; resolves to </ p> trigger label end hook
Function end, resolve to </ div> trigger end, the analysis termination;
Hook function may be built in AST, constructed of the element type in the start node hooks; construct text type node chars hooks; Construction type annotation nodes hook comment function;
When html parser hook function no longer triggers a description of all the templates are parsed completely, all types of nodes have been constructed in the hook function, namely AST been constructed; end node of the hierarchical relationship with AST stack to record, start node stack, stack;
That template html parsing process cycle, i.e. with a template html string loop, each cycle are taken from a field string html template, this process is repeated until html template is cut into the end of the cycle an empty string, parses completed;
9. Optimizer
Role: Find the static sub-tree in AST and marking;
Static subtree: node which owns the AST will not change; marking purposes - to improve performance; no need for static sub-tree re-render every time you create a new node; patching virtual dom in the process can be skipped ;
Identify all static nodes in AST and cook mark; find the root of all static and cook mark in the AST; recursion;
10. The code generator
AST converted into a content rendering function, namely the code string; the code string can be performed in the function package, i.e. the function is a function rendering; createElement rendering function performs the vnode can be created;
Generated code string is a recursive process, the processing sequentially from top to bottom each AST node;
There are different types of nodes: element nodes - text node - the node comment
After a good fight string string concatenation will return to the caller with the;
11. Life Cycle
Initialization phase (new Vue () beforeCreate created) ---- template compilation phase (after created, beforeMount before) ---- mount the stage (beforeMount mounted beforeUpdate updated) ---- unloading phase (beforeDestroy destroyed)
Initialization Phase: new Vue () between the phase created, --- initialize some properties object / event data and responsive on vue.js, such as props / methods / data / computed / watch / provide / inject.
Template compilation phase: the phase between the created and beforeMount hook function hook function, purpose --- to render the template rendering function, exists only in the full version.
. (Ps: when using vue-loader or vueify, * internal vue file template when building pre-compiled into js, so the final package is not required to lay the compiler, runtime version to v; this time templates have been compiled into the rendering function, so
There is no template compilation stage in the life cycle. The next stage of the initialization phase stage is mounted directly to the stage ).
Mount the stage: beforeMount is mounted between the hook function to mount the stage, the stage, vue.js instance will mount on dom, is about to render to the specified template dom element, mounted in the process, vue. js will be open Watcher
Track-dependent change; in the mounted stage, vue.js will continue to track changes in state, when the data changes, Watcher will notify the virtual dom re-rendered view, and the view before rendering South Korea will trigger beforeUpdate hook, rendering finished
Hook function will trigger updated after completion; this state will continue until the component is destroyed.
Unloading phase: application to call vm $ destroy method, vue.js will remove itself from the parent component, cancel all depend on the track and remove all event listeners on an instance.
12. Instruction
Special characteristics v- prefix value - js single expression;
Responsibilities: When the expression value changes, which produce a knock-on effect on the responsive action DOM
In the template parsing phase, in parsing instructions to AST, it features some built-in commands using the AST generated code string in the process of implementation, and finally trigger a custom command hook function in a virtual DOM rendering process so that the effective date;
Filter 13
At compile the function call compiled into the filter, the filter series compiled (Analysis - splicing string) after a nested function calls are executed before the result is a filter function parameters of a filter function; common The filter function
Such as formatting text
Reference & Thanks: layman Vue.js