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

 所属分类:web前端开发

 浏览:158次-  评论: 0次-  更新时间:2022-11-03
描述:更多教程资料进入php教程获得。 vue抽象语法树和虚拟dom的区别:1、抽象语法树指的是源代码语法结构的一种抽象表示,而虚拟dom本质上就是一...
更多教程资料进入php教程获得。

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

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境: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的区别是什么的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: vue,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!