作者信息

长期闲置

长风破浪会有时,直挂云帆济沧海。

最近文章
ajax请求时post和get的区别是什么807
ajax默认是异步请求吗294
cors和ajax的区别是什么570
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

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

    原创2022-06-23 17:10:40642 关注公众号:每天精选资源文章推送

    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中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:Vue
  • 推荐:PHP从基础到实战教程视频

    相关文章

    相关视频


    专题推荐