当前位置:Gxl网 > 前端框架 > vue抽象语法树和虚拟dom的区别是什么

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

时间:2022-06-23 帮助过:0人阅读 来源: php中文网

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则是对语法结构的抽象表示。

18.png

抽象语法树的终点是渲染函数(h函数)。

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

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

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

以上就是vue抽象语法树和虚拟dom的区别是什么的详细内容,更多请关注gxlsystem.com其它相关文章!

标签 Vue