What is the difference between vue abstract syntax tree and virtual dom

The difference between vue abstract syntax tree and virtual dom: 1. Abstract syntax tree refers to an abstract representation of the source code syntax structure, while virtual dom is essentially an ordinary JS object used to describe the view The interface structure; 2. Virtual DOM is an abstract representation of the real DOM in the form of objects, while the abstract syntax tree is an abstract representation of the syntax structure.

The operating environment of this tutorial: Windows 10 system, Vue3 version, Dell G3 computer.

What is the difference between vue abstract syntax tree and virtual dom

Virtual dom

What Is it a virtual dom?

Virtual dom is essentially an ordinary JS object used to describe the interface structure of the view

In vue, each component has a render function, and each render function Will return a virtual DOM tree, which means that each component corresponds to a virtual DOM tree

Why do we need virtual DOM?

In vue, rendering the view will call the render function. This rendering occurs not only when the component is created, but also when the data the view depends on is updated. If you use the real DOM directly when rendering, the creation, update, insertion and other operations of the real DOM will cause a lot of performance losses, which will greatly reduce the rendering efficiency.

Therefore, Vue uses virtual dom to replace the real dom when rendering, mainly to solve the problem of rendering efficiency.

Abstract syntax tree

##In computer science, Abstract Syntax Tree (AST), or syntax tree for short, is an abstract representation of the grammatical structure of source code. It expresses the grammatical structure of the programming language in the form of a tree. Each node on the tree represents a structure in the source code

The difference between virtual dom and ast:

Virtual dom and ast, or abstract syntax tree, both involve page rendering. When I first started learning, I often confused the two. In fact, they are completely different concepts. Both use objects for abstract representation, but virtual dom is an abstract representation of real dom in the form of objects, while ast is an abstract representation of grammatical structures.

The end point of the abstract syntax tree is the rendering function (h function).

Rendering function (h function), which is both the product of AST and the origin of vnode (virtual node). There are no instructions in the h function.

The abstract syntax tree will not perform the diff algorithm and the abstract syntax tree will not directly generate virtual nodes. The abstract syntax tree ultimately generates the rendering function

[Related recommendations: "

vue.js tutorial》】

The above is the detailed content of What is the difference between vue abstract syntax tree and virtual dom. For more information, please follow other related articles on the PHP Chinese website!