Let's talk about what is virtual dom? Why does vue use vdom?

This article will talk about the virtual DOM in vue, introduce what virtual dom is, the benefits of introducing vdom, and why vue uses vdom. I hope it will be helpful to everyone!

Almost all existing frameworks introduce virtual DOM to abstract the real DOM, which is now known as VNode and VDOM. So why do we need to introduce virtual DOM? ? This article will answer this question! (Learning video sharing: vuejs introductory tutorial)

1. What is virtual dom

Virtual domAs the name suggests, it is a virtual dom object, itself It is a JavaScript object, but it describes a view structure through different attributes.

2. Benefits of introducing vdom

1. Abstract real element nodes into VNode, effectively reducing the number of direct operations on dom, thereby improving program performance

• The cost of creating a real DOM is high: There are limitations to directly operating the DOM, such as diff, clone and other operations. There is a lot of content on a real element. If you perform a diff operation directly on it, , some unnecessary content will be additionally diffed; similarly, if you need to clone, you need to copy the entire content, which is also unnecessary. However, if you move these operations to JavaScript objects, it becomes simpler.
• Trigger multiple browser redraws and reflows: Operating dom is a relatively expensive operation. Frequent dom operations can easily cause page redraws and reflows, but abstract VNode is used for intermediate processing. , which can effectively reduce the number of direct operations on the dom, thereby reducing page redrawing and reflow.

2. To facilitate cross-platform implementation

• The same VNode node can be rendered into corresponding content on different platforms, for example: rendered in a browser It is a dom element node, which is rendered into the corresponding control in Native (iOS, Android), which can realize SSR(Nuxt.js/Next.js) and native application (Weex/React Native), small programs (mpvue/uni-app), etc., rendering into WebGL, etc.
• Vue3 allows developers to implement custom renderers based on VNode to facilitate rendering for different platforms

Additional: Why does vue use vdom?

• Introducing Virtual DOM Performance considerations are only one aspect.

  Performance is greatly affected by scenarios. Different scenarios may cause exponential performance gaps between different implementation solutions, so rely on fine-grained binding and Virtual DOM Which performance Better is really not an easy question to draw a conclusion on.

• Vue The more important reason why Virtual DOM was introduced is to decouple HTML dependencies. This It brings two very important benefits:

  • no longer relies on the HTML parser for template parsing, and can perform more AOT work to improve operation Time efficiency: By compiling the template AOT, the runtime volume of Vue can be further compressed, and the runtime efficiency can be further improved;
  • can be rendered to DOM# Platforms other than ## implement advanced features such as SSR and isomorphic rendering. Frameworks such as Weex apply this feature.

To sum up,

Virtual DOM’s performance gains are not the most important. What’s more important is that it makes Vue It has advanced features that modern frameworks should have.

3. How vdom is generated and how it becomes a real dom

In vue we often write templates for components, this template will be compiled by the compiler for rendering function, the render function will be called during the subsequent mount process, and the returned object is the virtual dom. But they are not real DOM yet, so they will be further converted into DOM in the subsequent patch process.

4. Role in subsequent diff

After the mounting process is completed, the vue program enters the update process. If some responsive data changes, it will cause the component to be re-rendered. At this time, a new vdom will be generated, and the changes will be obtained by diffing the last rendering result, thus converting it into a minimum amount of DOM operations and efficient updates. view.

Direct source code

vnode definition: https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/vnode.ts#L127-L128

[Create vnode]:

createElementBlock：https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/vnode.ts #L291-L292

createVnode：https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/vnode.ts#L486-L487

First call time: https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/apiCreateApp.ts#L283-L284

mount: https:// github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L1171-L1172

（Learning video sharing: web front-end）

The above is the detailed content of Let's talk about what is virtual dom? Why does vue use vdom?. For more information, please follow other related articles on the PHP Chinese website!