Detailed explanation of the introduction and use of virtual dom in vue3

How does Vue convert a template into a real DOM node, and how does it efficiently update these nodes? All of these cannot be separated from virtualdomLet's first understand this conceptdomThis concept and what it is.

What is a virtual dom

When using front-end frameworks, we often hear virtualdomThis concept. So what is virtualdomWoolen cloth?

Virtual DOM (VDOM for short) is a programming concept that means "virtually" the UI required by the target is represented through a data structure, saved in memory, and then keeping the real DOM in sync with it. This concept isReactBe the first to explore and then adopted by many different frameworks, including of course Vue. Simply put,Virtual DOM is a concept that uses JavaScript objects to represent real DOM.。

existvue3In, virtualdom, that is, in the codevnode, it is an object, defined inpackages/runtime-core/src/in the file.VNodeThe structure of the class is as follows. We will explain the specific fields one by one in the following chapters.

export interface VNode<
  HostNode = RendererNode,
  HostElement = RendererElement,
  ExtraProps = { [key: string]: any }
> {
  __v_isVNode: true
  []: true
  type: VNodeTypes
  props: (VNodeProps & ExtraProps) | null
  key: string | number | symbol | null
  ref: VNodeNormalizedRef | null
  scopeId: string | null
  slotScopeIds: string[] | null
  children: VNodeNormalizedChildren
  component: ComponentInternalInstance | null
  dirs: DirectiveBinding[] | null
  transition: TransitionHooks<HostElement> | null
  // DOM
  el: HostNode | null
  anchor: HostNode | null // fragment anchor
  target: HostElement | null // teleport target
  targetAnchor: HostNode | null // teleport target anchor
  staticCount: number
  suspense: SuspenseBoundary | null
  ssContent: VNode | null
  ssFallback: VNode | null
  shapeFlag: number
  patchFlag: number
  dynamicProps: string[] | null
  dynamicChildren: VNode[] | null
  appContext: AppContext | null
  ctx: ComponentInternalInstance | null
  memo?: any[]
  isCompatRoot?: true
  ce?: (instance: ComponentInternalInstance) => void
}

It is not so much a virtual DOM as a specific technology, but it is not a standard implementation. We can use a simple example to illustrate:

const vnode = {
  type: 'div',
  props: {
    id: 'hello'
  },
  children: [
    /* More vnode */
  ]
}

What is said herevnodeThat is, a pure JavaScript object (a "virtual node") that represents a<div>element. It contains all the information we need to create the actual element. It also contains more child nodes, which makes it the root node of the virtual DOM tree.

A runtime renderer will traverse the entire virtual DOM tree and build a real DOM tree accordingly. This process is calledMount (mount)。

If we have two virtual DOM trees, the renderer will traverse them in a comparative manner, find out the difference between them, and apply the changes to the real DOM. This process is calledrenew(patch), also known as "diffing" or "reconciliation".

The main benefit of virtual DOM is that it allows developers to flexibly and declaratively create, check and combine the required UI structures, while only leaving specific DOM operations to the renderer for processing.

Why use virtual dom

In front-end development, frequent operation of DOM is very time-consuming because each operation will cause the browser to re-arrange and re-paint. To solve this problem, virtual DOM came into being. By simulating the DOM in memory, we can batch calculate the changes in the DOM, thereby reducing the number of operations on the real DOM. This can improve the performance of the application, especially in large applications.

For example, when there are 100 updates of DOM in one operation, the virtual DOM will not operate the DOM immediately, but will compare it with the original DOM, save part of the content of these 100 updates to memory, and finally apply it on the DOM tree at one time, and then perform subsequent operations to avoid a large amount of unnecessary calculations.

Virtual DOM actually uses JavaScript objects to store the information of the DOM node, turn the update of the DOM into object modifications, and these modifications occur in memory. After the modification is completed, JavaScript is converted into a real DOM node and handed over to the browser to achieve performance improvement.

The benefits of virtual dom

The main benefits of using virtual DOM are as follows:

Performance optimization: By reducing the number of times you directly operate the real DOM, you can reduce the browser's redraw and reflow costs, thereby improving page performance.
Cross-platform: Virtual DOM does not depend on the browser environment and can be easily used on different platforms (such as server-side rendering, mobile applications, etc.).
Easy to test: Because the virtual DOM is a JavaScript object, we can operate and assert it directly without relying on the browser environment.

at the same timevue3The design is also like this. We can see that the organizational structure of the source code breaks down the various directories.runtime-coreThe implementation is unrelated to the platform. Used in a browser environmentruntime-domofdomOperation, use the various platforms on other platformsdomOperation, cross-platform.

How does vnode work in vue

From a high-level perspective, the following things happen when Vue components are mounted:

Compilation: The Vue template is compiled toRendering functions: The function used to return the virtual DOM tree. This step can be done ahead of time through the build step or instantly by using the runtime compiler.
Mount: The runtime renderer calls the rendering function, iterates over the returned virtual DOM tree, and creates the actual DOM node based on it. This step is performed as a responsive side effect, so it tracks all responsive dependencies used there.
renew: When a dependency changes, side effects will be rerun, and an updated virtual DOM tree will be created. The runtime renderer traverses the new tree, compares it with the old tree, and applies the necessary updates to the real DOM.

You can see that all our operations are aimed at virtual DOM. Only when the last submission is made, will the virtual DOM be mounted to the browser.

How to create a virtual dom

existvue3In, we aretemplateThe code written in the template will eventually passcompilerThe module is compiled, and after compilation, it will return arenderString, this will be called later when the application is runningrendergeneraterenderfunction. Different methods will be called in the function to perform virtualizationdomCreated.

For example, the following template:

Can go/Website experience template compilation results

<template>
  <hello-world :msg="msg" :info="info"></hello-world>
  <div>
    <button @click="addAge">Add age</button>
    <button @click="toggleMsg">Toggle Msg</button>
  </div>
</template>

After compilation, the following functions will be generated:

import { resolveComponent as _resolveComponent, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

const _hoisted_1 = ["onClick"]
const _hoisted_2 = ["onClick"]

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hello_world = _resolveComponent("hello-world")

  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createVNode(_component_hello_world, {
      msg: _ctx.msg,
      info: _ctx.info
    }, null, 8 /* PROPS */, ["msg", "info"]),
    _createElementVNode("div", null, [
      _createElementVNode("button", { onClick: _ctx.addAge }, "Add age", 8 /* PROPS */, _hoisted_1),
      _createElementVNode("button", { onClick: _ctx.toggleMsg }, "Toggle Msg", 8 /* PROPS */, _hoisted_2)
    ])
  ], 64 /* STABLE_FRAGMENT */))
}

Now we don't need to understand all the content of this code, we only focus on the code that creates the nodes in it, for examplecreateVNode，createElementVNodeThese are used to create virtualdomof. After the call is completed, a virtual will be generateddomTree. Because the tree structure is too large, we will not show it here, the entire structure and the virtual ones we defined abovedomConsistent structure.

Next we can take a look at creating a virtualdomFor specific implementations, we only choose the commonly used virtual creationdommethod. All and virtualdomThe relevant content is located in the source codepackages/runtime-core/src/middle

createVNode

function _createVNode(
  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT, // If it is a component, type is the component content.  If it is an ordinary type, it is a string, for example, div, HelloWorld and so on.  props: (Data &amp; VNodeProps) | null = null,
  children: unknown = null, //Subcomponent  patchFlag: number = 0,
  dynamicProps: string[] | null = null,
  isBlockNode = false
): VNode {
  if (!type || type === NULL_DYNAMIC_COMPONENT) {
    type = Comment
  }

  if (isVNode(type)) { // is the processing of Vnode, such as code written by the user through the h function    const cloned = cloneVNode(type, props, true /* mergeRef: true */)
    if (children) {
      normalizeChildren(cloned, children) // Standardized children    }
    if (isBlockTreeEnabled &gt; 0 &amp;&amp; !isBlockNode &amp;&amp; currentBlock) {
      if ( &amp; ) {
        currentBlock[(type)] = cloned
      } else {
        (cloned)
      }
    }
     |= 
    return cloned
  }

  // Standardized components written in class  if (isClassComponent(type)) { 
    type = type.__vccOpts
  }

  // Standardized asynchronous components and functional components  if (__COMPAT__) { 
    type = convertLegacyComponent(type, currentRenderingInstance)
  }

  // Standardized class props style  //For proxy objects, we need to clone them to use them  //Because direct modification will cause the responsiveness to be triggered  if (props) {
    props = guardReactiveProps(props)! // Prevent props from being responsive    let { class: klass, style } = props
    if (klass &amp;&amp; !isString(klass)) {
       = normalizeClass(klass) // Standard class    }
    if (isObject(style)) { // Standardized style      if (isProxy(style) &amp;&amp; !isArray(style)) {
        style = extend({}, style)
      }
       = normalizeStyle(style)
    }
  }

  // encode the vnode type information into a bitmap
  const shapeFlag = isString(type) // Generate different shapeFlags according to different types, so that they can be processed later on by different types.    ? 
    : __FEATURE_SUSPENSE__ &amp;&amp; isSuspense(type)
    ? 
    : isTeleport(type)
    ? 
    : isObject(type)
    ? ShapeFlags.STATEFUL_COMPONENT // Stateful Components    : isFunction(type)
    ? ShapeFlags.FUNCTIONAL_COMPONENT // Function components    : 0

  return createBaseVNode(
    type,
    props,
    children,
    patchFlag, // Update type    dynamicProps,
    shapeFlag,
    isBlockNode,
    true
  )
}

createVNodeMainly for deliverytypeMake a judgment, through assignmentshapeFlagTo indicate the type of the current virtual node.

ifpropscontainstyleorclassStandardization is required.

For example<div :style="['background:red',{color:'red'}]"></div>The first one iscssTextThe second is the object form, they should be converted to object type, so after conversion it should be<div style={color:'red',background:'red'}></div>. Of course forclassIt also needs to be standardized:class={hello:true,world:false} => :class="hello". But what is processed here is actually written by the user.renderfunction, and for useVueAfter the built-in compilation system, this layer of processing is not required.

Will call it at the endcreateBaseVNodePerform virtualdomCreation of

function createBaseVNode(
  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
  props: (Data &amp; VNodeProps) | null = null,
  children: unknown = null,
  patchFlag = 0,
  dynamicProps: string[] | null = null, // Dynamic properties  shapeFlag = type === Fragment ? 0 : ,
  isBlockNode = false,
  needFullChildrenNormalization = false
) {
  const vnode = { // Create a vnode    __v_isVNode: true, // Is it vnode    __v_skip: true,
    type, // type is component content for components    props,
    key: props &amp;&amp; normalizeKey(props), // Standardized key    ref: props &amp;&amp; normalizeRef(props), // Standardized props    scopeId: currentScopeId,
    slotScopeIds: null,
    children, // The child's vnode    component: null, // If it is a component, there will be an instance of the component. The subtree of the component instance is mounted on all the vnodes below this component    suspense: null,
    ssContent: null,
    ssFallback: null,
    dirs: null, // Instruction related    transition: null, // Transition related    el: null, // Real dom    anchor: null, // Insert location    target: null,
    targetAnchor: null,
    staticCount: 0,
    shapeFlag, // Component type    patchFlag, // Targeted update markers    dynamicProps, // Dynamic props    dynamicChildren: null, // Dynamic kids    appContext: null, // Apply the root context    ctx: currentRenderingInstance
  } as VNode

  if (needFullChildrenNormalization) {
    normalizeChildren(vnode, children) // Standardized subcomponents.  For example, slots or something.  Add children and change the shapFlag of vnode    if (__FEATURE_SUSPENSE__ &amp;&amp; shapeFlag &amp; ) {
      ;(type as typeof SuspenseImpl).normalize(vnode) // Standardized asynchronous components    }
  } else if (children) {
     |= isString(children) // Determine ShapeFlags, which can be a combination of multiple types      ? ShapeFlags.TEXT_CHILDREN
      : ShapeFlags.ARRAY_CHILDREN
  }

  // Compilation optimization related.  Don't need to understand now  if (
    isBlockTreeEnabled &gt; 0 &amp;&amp;
    // avoid a block node from tracking itself
    !isBlockNode &amp;&amp;
    // has current parent block
    currentBlock &amp;&amp;
    // presence of a patch flag indicates this node needs patching on updates. // The existence of the patch flag indicates that this node needs patching when updated.    // component nodes also should always be patched, because even if the // The component node should have patchFlag    // component doesn't need to update, it needs to persist the instance on to // The component does not need to be updated, it needs to persist the instance on to    // the next vnode so that it can be properly unmounted later.    ( &gt; 0 || shapeFlag &amp; ) &amp;&amp; // There is patchFlag to indicate that it is a dynamic node     !== PatchFlags.HYDRATE_EVENTS
  ) {
    (vnode) // Put it into the father's block, which means that it is now a dynamic node  }

  if (__COMPAT__) {
    convertLegacyVModelProps(vnode)
    defineLegacyVNodeProperties(vnode)
  }

  return vnode
}

You can see that we have created aVNodeAn object of type is a virtual onedom. At the same timekey, ref, chidren(needFullChildrenNormalization is true)conductstandardization。

So far we knowvue3In the virtualdomHow did it come about?

createElementVNode

Used to create normaltagVirtual nodes such as<div></div>

export { createBaseVNode as createElementVNode }

Can seecreateElementVNodeActually it'screateBaseVNode, used to create virtualdom。

Used in the project

As we mentioned above, the Vue template will be precompiled into a virtual DOM rendering function. Vue also provides an API(h function)This allows us to directly handwritten rendering functions without using template compilation. Rendering functions are more flexible than templates when dealing with highly dynamic logic, because you can completely use JavaScript to construct the vnode you want.

But the official recommendation is to use templates instead of rendering functions. So why is Vue recommended to use templates by default? There are several reasons:

The template is closer to the actual HTML. This allows us to reuse some existing HTML code snippets more conveniently, bring a better accessibility experience, use CSS application styles more conveniently, and make it easier for designers to understand and modify.
Due to its determined syntax, it is easier to perform static analysis of templates. This enables Vue's template compiler to apply many compile-time optimizations to improve the performance of virtual DOM (such as static boosts, targeted updates, etc.)

In most cases, Vue recommends using template syntax to create applications. However, in some usage scenarios, we really need to use JavaScript's complete programming capabilities. At this timeRendering functionsIt comes in handy. Vue provides a h() function for creating vnodes. Let's take a look belowhFunction usage:

import { h } from 'vue'

const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    /* children */
  ]
)

h()yeshyperscriptThe abbreviation of ''JavaScript that can generate HTML (Hypertext Markup Language)''. This name comes from the conventions formed by default by many virtual DOM implementations. A more accurate name should becreateVnode(), but a short name will save more effort when you need to use the render function multiple times.

We can use it in componentshFunctions to perform rendering and use templates

import { h } from 'vue'

export default {
  setup() { // Make sure that the returned function is a function rather than a value. This function will be used as the render function render, which will be called repeatedly later.    // Use array to return multiple root nodes    return () =&gt; [
      h('div'),
      h('div'),
      h('div')
    ]
  }
}

The above code is equivalent to

<template>
	<div></div>
  <div></div>
  <div></div>
</template>

export default {
  setup() {}
}

Then we can take a lookhThe source code of the function:

export function h(type: any, propsOrChildren?: any, children?: any): VNode {
  const l = 
  if (l === 2) { // There are only two parameters, either only children or only props    if (isObject(propsOrChildren) &amp;&amp; !isArray(propsOrChildren)) {
      if (isVNode(propsOrChildren)) { // If the second parameter is a vnode, it means it is a child node        return createVNode(type, null, [propsOrChildren])
      }
      return createVNode(type, propsOrChildren) // No child nodes    } else {
      // If propsOrChildren is an array, it must be a child node      return createVNode(type, null, propsOrChildren)
    }
  } else { // Both prop and child nodes have situations    if (l &gt; 3) { // After the third parameter, it is all children      children = (arguments, 2)
    } else if (l === 3 &amp;&amp; isVNode(children)) {
      children = [children]
    }
    return createVNode(type, propsOrChildren, children)
  }
}

Can seehThe function has three parameters, the first parameter is type, and the second ispropsParameters or child nodes (if there is a third parameter, it isprops, if there is no third parameter, you need to judge it), the three parameters are the child nodes. Except for the type required, other parameters are optional.hThe function just makes a judgment on the parameters, and then the underlying layer is still calledcreateVNodeCreate virtual DOM.

The specific judgment logic code has been commented, so you can read it in combination.

Summarize

Now I believe everyone has learned about the virtualdomAll our subsequent operations will be done by operating virtualdomTo achieve it, the last time it is mounted is nativedomOperation to virtualizedomMount to the page.

The above is the detailed explanation of the introduction and use of virtual dom in vue3. For more information about vue3 virtual dom, please follow my other related articles!