• 技术文章 >web前端 >前端问答

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

    长期闲置长期闲置2022-06-23 17:10:40原创217

    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的区别是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Vue
    上一篇:css3支持border属性吗 下一篇:vue3和vue2的语法有什么区别
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• vue内置jquery吗• jquery和vue中的ajax有什么区别• vue是javascript吗• vue中props可以传递函数吗• Github 上 8 个不可错过的 Vue 项目,快来收藏!!
    1/1

    PHP中文网