.container .explainer %h2.explain1 Here is the DOM %h2.explain2.visually-hidden We make a copy in JavaScript called the Virtual DOM %h2.explain3.visually-hidden We do this because touching the DOM with JavaScript is computationally expensive. %h2.explain4.visually-hidden While performing updates in JavaScript is cheap, %h2.explain5.visually-hidden Finding the required DOM nodes and updating them with JS is expensive %h2.explain6.visually-hidden So we batch calls, and change the DOM all at once. %h2.explain7.visually-hidden The virtual DOM in is a lightweight JavaScript object, created by this render function %h2.explain8.visually-hidden It takes three arguments: the element, an object with data, props, attrs and more, and an array %h2.explain9.visually-hidden The array is where we pass in the children, which have all these arguments too %h2.explain10.visually-hidden Here’s the text in the div %h2.explain11.visually-hidden And it’s child, the ul %h2.explain12.visually-hidden Now in turn it’s children, the lis %h2.explain13.visually-hidden If we need to update the list items, we do so in javascript %h2.explain14.visually-hidden And only then do we update the actual DOM %h2.explain15.visually-hidden The Virtual DOM allows us to make performant update our UIs! ✨ %h3.domtext The DOM .text.dom %span This is a webpage. This webpage has some text in a p tag. Below is a list: %ul %li.firstli.dom-last-li Thing %li.dom-last-li Another thing %span It's fun to make websites with Vue you know? Some more text. %h3.vdomtext The Virtual DOM .text.vdom %span.last-text This is a webpage. This webpage has some text in a p tag. Below is a list: %ul.last-ul %li.firstli.last-li.update-li Thing %li.last-li.update-li Another thing %span.last-text It's fun to make websites with Vue you know? Some more text. %svg.gear{:height => "75", :viewbox => "0 0 90 90", :width => "75", :xmlns => "http://www.w3.org/2000/svg"} %g %g.geararrows %path{:d => "M45.5,77.8c-14.8,0-27.8-10-31.6-24.3c-0.1-0.5,0.2-1.1,0.7-1.2c0.5-0.1,1.1,0.2,1.2,0.7c3.6,13.4,15.8,22.8,29.7,22.8 c17,0,30.8-13.8,30.8-30.8c0-0.6,0.4-1,1-1s1,0.4,1,1C78.2,63.1,63.5,77.8,45.5,77.8z"} %path{:d => "M13.7,46c-0.6,0-1-0.4-1-1c0-18.1,14.7-32.8,32.8-32.8c13.6,0,26,8.6,30.7,21.4c0.2,0.5-0.1,1.1-0.6,1.3 c-0.5,0.2-1.1-0.1-1.3-0.6c-4.5-12-16-20.1-28.8-20.1c-17,0-30.8,13.8-30.8,30.8C14.7,45.6,14.3,46,13.7,46z"} %path{:d => "M12.8,60c-0.1,0-0.2,0-0.3,0c-0.5-0.2-0.8-0.7-0.7-1.2l1.5-5.2c0.2-0.7,0.7-1.2,1.4-1.4c0.7-0.2,1.4,0,1.9,0.6l3.7,3.9 c0.4,0.4,0.4,1,0,1.4c-0.4,0.4-1,0.4-1.4,0l-3.7-3.9l-1.5,5.2C13.6,59.7,13.2,60,12.8,60z"} %path{:d => "M75.5,35.9c-0.4,0-0.8-0.1-1.1-0.4l-4.4-3c-0.5-0.3-0.6-0.9-0.3-1.4c0.3-0.5,0.9-0.6,1.4-0.3l4.4,3l0.4-5.4 c0-0.6,0.5-1,1.1-0.9c0.6,0,1,0.5,0.9,1.1L77.5,34c-0.1,0.7-0.5,1.3-1.1,1.6C76.1,35.8,75.8,35.9,75.5,35.9z"} %g.midgear %path{:d => "M63.1,41.7c-0.5-2.6-1.5-5.1-3-7.2l2.6-2.6l-4.6-4.6l-2.6,2.6c-2.1-1.5-4.6-2.5-7.2-3v-3.7h-6.6v3.7c-2.6,0.5-5.1,1.5-7.2,3 l-2.6-2.6l-4.6,4.6l2.6,2.6c-1.5,2.1-2.5,4.6-3,7.2h-3.7v6.6h3.7c0.5,2.6,1.5,5.1,3,7.2l-2.6,2.6l4.6,4.6l2.6-2.6 c2.1,1.5,4.6,2.5,7.2,3v3.7h6.6v-3.7c2.6-0.5,5.1-1.5,7.2-3l2.6,2.6l4.6-4.6l-2.6-2.6c1.5-2.1,2.5-4.6,3-7.2h3.7v-6.6H63.1z M45,54 c-5,0-9-4-9-9s4-9,9-9s9,4.1,9,9S50,54,45,54z"} %path{:d => "M49.3,67.9h-8.6v-3.9c-2.2-0.5-4.2-1.3-6.1-2.5l-2.8,2.8l-6.1-6.1l2.8-2.8c-1.2-1.9-2-3.9-2.5-6.1h-3.9v-8.6h3.9 c0.5-2.2,1.3-4.2,2.5-6.1l-2.8-2.8l6.1-6.1l2.8,2.8c1.9-1.2,3.9-2,6.1-2.5v-3.9h8.6v3.9c2.2,0.5,4.2,1.3,6.1,2.5l2.8-2.8l6.1,6.1 l-2.8,2.8c1.2,1.9,2,3.9,2.5,6.1h3.9v8.6h-3.9c-0.5,2.2-1.3,4.2-2.5,6.1l2.8,2.8l-6.1,6.1l-2.8-2.8c-1.9,1.2-3.9,2-6.1,2.5V67.9z M42.7,65.9h4.6v-3.6l0.8-0.1c2.5-0.4,4.8-1.4,6.8-2.8l0.7-0.5l2.5,2.5l3.2-3.2l-2.5-2.5l0.5-0.7c1.4-2.1,2.4-4.4,2.8-6.8l0.1-0.8 h3.6v-4.6h-3.6l-0.1-0.8c-0.4-2.5-1.4-4.8-2.8-6.8l-0.5-0.7l2.5-2.5l-3.2-3.2l-2.5,2.5l-0.7-0.5c-2.1-1.4-4.3-2.4-6.8-2.8l-0.8-0.1 v-3.6h-4.6v3.6l-0.8,0.1c-2.5,0.4-4.7,1.4-6.8,2.8l-0.7,0.5l-2.5-2.5l-3.2,3.2l2.5,2.5l-0.5,0.7c-1.4,2.1-2.4,4.3-2.8,6.8l-0.1,0.8 h-3.6v4.6h3.6l0.1,0.8c0.4,2.5,1.4,4.8,2.8,6.8l0.5,0.7l-2.5,2.5l3.2,3.2l2.5-2.5l0.7,0.5c2.1,1.4,4.3,2.4,6.8,2.8l0.8,0.1V65.9z M45,55c-5.5,0-10-4.5-10-10s4.5-10,10-10s10,4.5,10,10S50.5,55,45,55z M45,37c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S49.4,37,45,37z"} .code %span.keyword export default function = succeed "()" do %span.func render %br/ %span.sp.keyword return ( %span.func> openBlock (), = succeed "(" do %span.func createBlock %br/ %span.fn-el.visually-hidden %span.sp = succeed "," do %span.sp.string "div" %span.comment //element %br/ %span.fn-state.visually-hidden %span.sp = succeed "{}," do %span.sp %span.comment.sp //state, props, style, attrs %br/ %span.fn-arr1.visually-hidden %span.sp = succeed "[...]" do %span.sp %span.comment //children %br/ %span.fn-arr2.visually-hidden %span.sp = succeed "[" do %span.sp %br/ %span.last-text %span.sp %span.sp %span.sp = succeed "(" do %span.func createTextVNode = succeed ")," do %span.string "This is a webpage...." %br/ %span.last-ul %span.sp %span.sp %span.sp = succeed "(" do %span.func createVNode = succeed "," do %span.string "ul" %br/ %span.last-li %span.sp %span.sp %span.sp %span.sp = succeed "(" do %span.func createVNode = succeed "," do %span.string "li" = succeed ")," do %span.string " %span.update-li> Thing One " %br/ %span.last-li %span.sp %span.sp %span.sp %span.sp = succeed "(" do %span.func createVNode = succeed "," do %span.string "li" = succeed ")" do %span.string " %span.update-li> Another thing " %br/ %span.sp %span.sp = succeed "])," do %span.sp %br/ %span.last-text %span.sp %span.sp %span.sp = succeed "(" do %span.func createTextVNode = succeed ")" do %span.string "It's fun to make websites..." %br/ %span.sp = succeed "]" do %span.sp %br/ = succeed "))" do %span.sp %br/ } %br/

!