What is virtual dom in Vuejs?

Answered by Vimlesh
Virtual DOM? You have probably heard about the term "virtual DOM", which Vue's rendering system is based upon. The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM. The concept was pioneered by React, and has been adapted in many other frameworks with different implementations, including Vue. Virtual DOM is more of a pattern than a specific technology, so there is no one canonical implementation. We can illustrate the idea using a simple example: js const vnode = { type: 'div', props: { id: 'hello' }, children: [ /* more vnodes */ ] } Here, vnode is a plain JavaScript object (a "virtual node") representing a
element. It contains all the information that we need to create the actual element. It also contains more children vnodes, which makes it the root of a virtual DOM tree. A runtime renderer can walk a virtual DOM tree and construct a real DOM tree from it. This process is called mount. If we have two copies of virtual DOM trees, the renderer can also walk and compare the two trees, figuring out the differences, and apply those changes to the actual DOM. This process is called patch, also known as "diffing" or "reconciliation". The main benefit of virtual DOM is that it gives the developer the ability to programmatically create, inspect and compose desired UI structures in a declarative way, while leaving the direct DOM manipulation to the renderer.

Vue js is progressive javascript script used to create dynamic user interfaces.Vue js is very easy to learn.In order to..

Vue js comes with following features Templates Reactivity Components Transitions Routing ..

The Life cycle of each Vue instance goes through a series of initialization steps when it is created. – for example, ..

Related Questions