Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "vue uses vdom", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article, "what are the benefits of vue using vdom?"

1. What is virtual dom?

As the name implies, a virtual dom is a virtual dom object, which itself is a JavaScript object, but it describes a view structure through different properties.

two。 Benefits of introducing vdom

1. The nodes of real elements are abstracted into VNode, which can effectively reduce the number of direct operation of dom and improve program performance.

The cost of creating a real DOM is high: direct manipulation of dom is limited, such as diff, clone and other operations. There are a lot of content on a real element, and if you diff it directly, you will diff some unnecessary content. Similarly, if you need to clone, you need to copy all of its contents, which is not necessary. However, if you move these operations to the JavaScript object, it becomes easier.

Trigger multiple browser redrawing and reflow: operating dom is a relatively expensive operation, frequent dom operations are easy to cause page redrawing and reflow, but the intermediate processing through abstract VNode can effectively reduce the number of direct operation of dom, thus reducing page redrawing and reflow.

two。 Easy to achieve cross-platform

The same VNode node can be rendered into corresponding content on different platforms, for example, rendering is a dom element node in the browser, rendering becomes a corresponding control in Native (iOS, Android), SSR (Nuxt.js/Next.js), native application (Weex/React Native), Mini Program (mpvue/uni-app), etc., rendering to WebGL, and so on.

Vue3 allows developers to implement custom renderers (renderer) based on VNode to facilitate rendering for different platforms

Add: why does vue adopt vdom?

The performance considerations of introducing Virtual DOM are only one aspect.

Performance is greatly affected by scenarios, and different scenarios may result in multiple performance differences between different implementation scenarios, so it is not easy to come to a conclusion by relying on fine-grained binding or Virtual DOM for better performance.

The more important reason why Vue introduced Virtual DOM is to decouple HTML dependencies, which brings two very important benefits:

Instead of relying on the HTML parser for template parsing, you can do more AOT work to improve runtime efficiency: through template AOT compilation, the runtime volume of Vue can be further reduced, and runtime efficiency can be further improved.

You can render to platforms other than DOM to achieve advanced features such as SSR and isomorphic rendering, which are applied by frameworks such as Weex.

In summary, the performance benefits of Virtual DOM are not the most important, but more importantly, it makes Vue have the advanced features that modern frameworks should have.

3. How to generate vdom and how to become a real dom

In vue, we often write a template-template for the component. This template will be compiled by the compiler-compiler into a dye function, and the render function will be called during the next mount, and the returned object is the virtual dom. But they are not really dom yet, so they will be further converted to dom in the subsequent patch process.

4. The role in the subsequent diff

After the mount process is over, the vue program enters the update process. If some responsive data changes, it will cause the component to re-render. At this time, a new vdom will be generated, and the last rendering result diff can be changed, which can be converted to a minimum amount of dom operation to update the view efficiently.

The above is about the content of this article on "what are the benefits of adopting vdom in vue". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.