This article is based on the “vue.js design and Implementation” “the art of balancing” chapter learning, plus personal understanding, not completely copy the code and words in the book. It is recommended to purchase genuine Vue. Js Design and Implementation for deep learning.

Imperative and declarative

Imperative programming focuses on the process, the typical imperative programming library jQuery:

<div id="app"></div>

// Get the div tag with id app
$('#app')
    // Set the text class to Hello World
    .text('hello world')
    // When clicked, change the content to Hello jquery
    .on('click'.function () {
        this.innerText = 'hello jquery'
    })
Copy the code

Imperative programming is more in line with the common way of thinking, manipulating the DOM directly and performing better.

Declarative programming focuses on results, such as Vue:

<template> <! -- Define UI --><div id="app">{{ content }}</div>
</template>

<script setup>
import { ref } from 'vue'

// Declare the status
const content = ref('hello world')
const changeContent = () = > {
    // Change the status
    content.value = 'hello vue'
}
</script>
Copy the code

Declarative programming conforms to the functional idea of UI = F (x), a data-driven view where the UI modification process is left to the framework and developers only need to focus on variables, reducing the mental burden of maintenance.

Conclusion: Declarative programming is more maintainable, but less performance than imperative programming, and Vue is all about maintaining maintainability while minimizing the performance penalty.

Performance of the virtual DOM

Vue will generate a VNode when rendering the view for the first time, and a new VNode will be generated when updating the view. Compare the old and new vnodes to find the smallest modification difference and let the modification be made, so:

Performance cost of updating declarative code = performance cost of finding differences + performance cost of modifying the DOM

In theory, direct native JavaScript manipulation of the DOM is better, but it requires a lot of developer power. In the days of jQuery, there was a lot of innerHTML violence.

Performance comparison at first render

Virtual DOM time = JavaScript object creation (VNode) + full DOM rendering

InnerHTML time = concatenating JavaScript strings + full DOM rendering

Performance comparison at update time

Virtual DOM time = create new JavaScript object (VNode) + Diff + partial DOM rendering

InnerHTML time = concatenating JavaScript strings + full DOM rendering

summary

It is not easy to say whether manipulating the virtual DOM or the native DOM will perform better. Because it depends on how you manipulate the DOM, when you manipulate the DOM, and how much you change it.

The virtual DOM is a comprehensive choice for runtime performance, code maintainability, and reduced mental load.

Run time and compile time

Net runtime

Hand-write DOM objects, run time directly through the object to render, but writing trouble.

var vnode = {
    tag: 'div'.children: [{tag: 'span'.children: 'hello '
        },
        {
            tag: 'span'.children: 'vue'}}]function render(vnode, parent) {
    const el = document.createElement(vnode.tag)
    const children = vnode.children
    if (typeof children === 'string') {
        el.innerHTML = vnode.children
    }
    if (Array.isArray(children) && children.length ! = =0) {
        children.forEach(child= > {
            render(child, el)
        })
    }
    parent.appendChild(el)
}
render(vnode, document.body)
Copy the code

Compile time + runtime

Write normal HTML templates while developing:

<div>
    <span>hello </span>
    <span>vue</span>
</div>
Copy the code

Build with compiler:

const htmlString = '
      

       ... 
      
'
const content = compile(htmlString)
Copy the code

Runtime rendering:

render(content, document.body)
Copy the code

Pure compile-time

We can compile templates into rendering functions or vNodes, which can also be compiled directly into native DOM operations:

const htmlString = '
      

       ... 
      
'
const content = compile(htmlString)

// Build
const div = document.createElement('div')
const hello = document.createElement('span')
hello.innerHTML = 'hello '
div.appendChild(hello)
// ...
Copy the code

summary

Both the run-time and compile-time + run-time approaches can achieve cross-platform rendering with different renderers, providing high flexibility.

However, pure runtime writing is troublesome. If you want to do static optimization, you need to manually mark, while compile-time + runtime can be entrusted to compiler to do.

Pure compilation provides the best performance in theory, but is less flexible.

To sum up

Vue is a compile-time + run-time declarative UI framework that utilizes the virtual DOM for update rendering. Ensure it has good maintainability and flexibility, with static optimization as close to native performance as possible.