vue抽象语法树和虚拟dom的区别是什么

vue抽象语法树和虚拟dom的区别：1、抽象语法树指的是源代码语法结构的一种抽象表示，而虚拟dom本质上就是一个普通的js对象，用于描述视图的界面结构；2、虚拟dom是将真实dom以对象的方式进行抽象表示，而抽象语法树则是对语法结构的抽象表示。

本教程操作环境：windows10系统、Vue3版、Dell G3电脑。

vue抽象语法树和虚拟dom的区别是什么

虚拟dom

什么是虚拟dom？

虚拟dom本质上就是一个普通的JS对象，用于描述视图的界面结构

在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这也就意味着每个组件都对应一棵虚拟DOM树

为什么需要虚拟dom？

在vue中，渲染视图会调用render函数，这种渲染不仅发生在组件创建时，同时发生在视图依赖的数据更新时。如果在渲染时，直接使用真实DOM，由于真实DOM的创建、更新、插入等操作会带来大量的性能损耗，从而就会极大的降低渲染效率。

因此，vue在渲染时，使用虚拟dom来替代真实dom，主要为解决渲染效率的问题。

抽象语法树

在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构

虚拟dom和ast的区别：

虚拟dom和ast即抽象语法树，都涉及到了页面渲染，刚开始学习的时候我经常将两者混淆，其实两者是截然不同的概念。两者都是使用对象来进行抽象表示，但是虚拟dom是将真实dom以对象的方式进行抽象表示，而ast则是对语法结构的抽象表示。

抽象语法树的终点是渲染函数（h函数）。

渲染函数（h函数）,它既是AST的产物，也是vnode(虚拟节点)的起源。h函数里面是不含指令的。

抽象语法树不会进行diff算法的并且抽象语法树不会直接生成虚拟节点，抽象语法树最终生成的是渲染函数的

【相关推荐：《vue.js教程》】