Dom of research on virtual vue

• Vue.js by the compiler to convert the template to template rendering function (render), perform the rendering function you can get a virtual node tree
• When the operation of the Model, it will trigger the Watcher object corresponds Dep. Watcher object calls the corresponding update to modify the view. This is primarily to compare differences in the old and new virtual node, then DOM operations to update the view according to comparison results.

   Simply speaking, in the underlying implementation of Vue, Vue will be compiled into a virtual template DOM rendering functions. When combined Vue own response system, changes in state, Vue intelligently re-calculate the minimum cost of the components and should be rendered to the DOM operations.

 patch (also known as patching algorithm): the core part of the virtual DOM, it can be rendered into vnode real DOM, this process is the contrast between the old and the new virtual What are the different nodes, and then find the nodes need to be updated according to the comparison results update. This we can see from the word meaning, patch itself patch, patch mean, the actual purpose of the role is to modify the existing DOM to implement updated view. Vue's Virtual DOM Patching algorithm is based on Snabbdom achieve, and made a lot of adjustments and improvements on the basis of some

Virtual DOM is actually a JavaScript Object (VNode node) as the basis of the tree, object attributes to describe the node, it is actually just a layer of abstraction of the real DOM. The final series of operations by the tree is mapped to the real environment.

The ultimate goal is to render virtual DOM node to the virtual view. However, if the direct use of virtual nodes covering the old node, then there will be a lot of unnecessary DOM manipulation. For example, a label ul li a lot of labels, of which only a li has changed, in which case if you use the new ul ul to replace the old, because the unnecessary waste caused by DOM manipulation on performance.

In order to avoid unnecessary DOM manipulation, virtual DOM node mapped to the virtual process view, the virtual node with the last rendering old virtual node (oldVnode) view used to do comparison, to find out the real nodes need to be updated to DOM operation, so as to avoid other operations without changes to the DOM.

In fact, virtual DOM in Vue.js mainly do two things:

• Provide real DOM nodes corresponding to the virtual node vnode
• The vnode virtual nodes and virtual nodes oldVnode old comparison, and then update the view

• Have the advantage of cross-platform

Because Virtual DOM JavaScript is an object-based environment without relying on real platform, so it has the ability to cross-platform, such as browser platform, Weex, Node and so on.

• DOM slow operation, high operating efficiency js. We can compare operating on the JS DOM layer and improve efficiency.

Because fast execution DOM operation is far less Javascript operation speed, and therefore, a large amount of DOM operations conveyed to Javascript, the use of patching algorithms to calculate the node really needs to be updated to minimize DOM operations, thereby significantly improving performance.

Virtual DOM is essentially between JS and DOM made a cache. CPU and hard disk can be compared, since the hard drive so slow, we add a buffer between them: Since DOM so slow, we add a buffer between them JS and DOM. CPU (JS) operates only memory (Virtual DOM), the last time and then change into the hard disk (DOM)

• Enhance rendering performance

Virtual DOM advantage does not lie in a single operation, but in a large number of frequent data updates, be able to view a reasonable and efficient update.

In order to achieve efficient DOM manipulation, an efficient virtual DOM diff algorithm becomes necessary. Through core ---- diff algorithms patch, find this DOM node needs to be updated to update the other is not updated.

Vue's diff algorithm is based on snabbdom remoulded, just do diff between vnode same level, the same level vnode recursively diff, and ultimately to update the entire DOM tree. Because the cross-level operation is very small, negligible, so the time complexity becomes O (n) from O (n3).

Diff algorithm implementation process

diff algorithm itself is very complicated, very difficult to achieve. This article simple to complicated, a rough description of the following two core functions implementation process:

• patch (container, vnode): Initial when rendering the real VDOM rendered DOM is then inserted into the container inside.
• patch (vnode, newVnode): re-rendering time, new and old vnode vnode contrast, the difference between then applied to the real DOM tree constructed.

function createElement(vnode) {    
var tag = vnode.tag  
var attrs = vnode.attrs || {}    
var children = vnode.children || []    
if (!tag) {       
 return null  
  }    
// 创建真实的 DOM 元素    
var elem = document.createElement(tag)   
 // 属性    
var attrName    
for (attrName in attrs) {    
    if (attrs.hasOwnProperty(attrName)) { 
           // 给 elem 添加属性
           elem.setAttribute(attrName, attrs[attrName])
        }
    }
    // 子元素
    children.forEach(function (childVnode) {
        // 给 elem 添加子元素，如果还有子节点，则递归的生成子节点。
        elem.appendChild(createElement(childVnode))  // 递归
    })    // 返回真实的 DOM 元素   
 return elem
}

2.patch(vnode,newVnode)

Here we consider only how vnode and newVnode contrast:

function updateChildren(vnode, newVnode) {
    var children = vnode.children || []
    var newChildren = newVnode.children || []
  // 遍历现有的children
    children.forEach(function (childVnode, index) {
        var newChildVnode = newChildren[index]
  // 两者tag一样
        if (childVnode.tag === newChildVnode.tag) {
            // 深层次对比，递归
            updateChildren(childVnode, newChildVnode)
        } else { 
  // 两者tag不一样
           replaceNode(childVnode, newChildVnode) 
       }
    }
)}