Vue2 Virtual DOM

The point of vue virtual dom is to simulate dom nodes with javascript objects. 

// Pseudocode representing DOM nodes in Javascript code 
Let domNode = {
  tag: 'ul'
  attributes: { id: 'myId' }
  children: [
// here is li 
  ]
};

Update dom node via JavaScript

// Code to update the virtual DOM 
domNode.children.push( ' <ul>Item 3</ul> ' );

Then, update the changed part to the real DOM as follows:

//This method is to call the DOM API to change the real DOM
//It will be executed in batches for higher efficiency
sync(originalDomNode, domNode);