## 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:

- Thing
- Another thing

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:

- Thing
- Another thing

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..." )
]
))
}