Here is the DOM

We make a copy in JavaScript called the Virtual DOM

We do this because touching the DOM with JavaScript is computationally expensive.

While performing updates in JavaScript is cheap,

Finding the required DOM nodes and updating them with JS is expensive

So we batch calls, and change the DOM all at once.

The virtual DOM in is a lightweight JavaScript object, created by this render function

It takes three arguments: the element, an object with data, props, attrs and more, and an array

The array is where we pass in the children, which have all these arguments too

Here’s the text in the div

And it’s child, the ul

Now in turn it’s children, the lis

If we need to update the list items, we do so in javascript

And only then do we update the actual DOM

The Virtual DOM allows us to make performant update our UIs! ✨

The DOM

This is a webpage. This webpage has some text in a p tag. Below is a list: It's fun to make websites with Vue you know? Some more text.

The Virtual DOM

This is a webpage. This webpage has some text in a p tag. Below is a list: It's fun to make websites with Vue you know? Some more text.
export default function render()
return (openBlock(), createBlock(
"div", //element
{}, //state, props, style, attrs
[...] //children
[
createTextVNode( "This is a webpage...."),
createVNode( "ul",
createVNode( "li", "Thing One" ),
createVNode( "li", "Another thing" )
]),
createTextVNode( "It's fun to make websites...")
]
))
}