首页 > 其他分享 >虚拟dom

虚拟dom

时间:2024-04-28 21:57:23浏览次数:17  
标签:vue render dom 编译 虚拟 模板

  1. 什么是虚拟dom?
    虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构
    在vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟dom树,这也就意味着每个组件都对应一棵虚拟DOM树

  2. 为什么需要虚拟dom?
    vue中,渲染视图会调用render函数,这种渲染不仅发生在组件创建时,同时发生在视图依赖的数据更新时。如果在渲染时,直接使用真实DOM,由于真实DOM的创建、更新、插入等操作会带来大量的性能损耗,从而就会极大的降低渲染效率。
    因此,vue在渲染时,使用虚拟dom来替代真实dom,主要为解决渲染效率的问题。

  3. 虚拟dom是如何转换为真实dom的?
    在一个组件实例首次被渲染时,它先生成虚拟dom树,然后根据虚拟dom树创建真实dom,并把真实dom挂载到页面中合适的位置,此时,每个虚拟dom便会对应一个真实的dom。
    如果一个组件受响应式数据变化的影响,需要重新渲染时,它仍然会重新调用render函数,创建出一个新的虚拟dom树,用新树和旧树对比,通过对比,vue会找到最小更新量,然后更新必要的虚拟dom节点,最后,这些更新过的虚拟节点,会去修改它们对应的真实dom
    这样一来,就保证了对真实dom达到最小的改动。

  4. 模板和虚拟dom的关系
    vue框架中有一个compile模块,它主要负责将模板转换为render函数,而render函数调用后将得到虚拟dom。
    编译的过程分两步:
    如果是在vue-cli的默认配置下,编译发生在打包时,这称之为模板预编译。
    编译是一个极其耗费性能的操作,预编译可以有效的提高运行时的性能,而且,由于运行的时候已不需要编译,vue-cli在打包时会排除掉vue中的compile模块,以减少打包体积
    模板的存在,仅仅是为了让开发人员更加方便的书写界面代码
    vue最终运行的时候,最终需要的是render函数,而不是模板,因此,模板中的各种语法,在虚拟dom中都是不存在的,它们都会变成虚拟dom的配置

    1. 将模板字符串转换成为AST
    2. AST转换为render函数

    如果使用传统的引入方式,则编译时间发生在组件第一次加载时,这称之为运行时编译。

标签:vue,render,dom,编译,虚拟,模板
From: https://www.cnblogs.com/shmillly959/p/18164571

相关文章

  • Linux Centos7 虚拟环境安装Mysql数据库(超详细图文讲解)
    LinuxCentos7虚拟环境安装Mysql数据库(超详细图文讲解)1、进入Centos7虚拟机,使用wget下载Mysql相应的rpm包下载:wgethttp://repo.mysql.com/mysql57-community-release-el7-8.noarch.rpm如果没有wget命令,可以使用yum安装,yuminstallwget2、执行rpm命令,安装rpmrpm-ivhmys......
  • Paper——可容错的虚拟机实践系统设计.18162229
    目标:通过主备复制手段设计一个可容错的VM,用于用户运行企业级程序。primary日常工作,一旦它宕机,和它保持lock-step的backup会立刻顶上,外界观察不到这些操作,我们制造了只有一台VM永远在正常运行的假象。要考虑的点:使用什么手段保持primary和backup严格同步在虚拟化单核CPU时和多......
  • python虚拟环境
    主要是解决自己的一些疑问:1、python的虚拟环境其实就是对我们真实安装python的另一份。2、当我们在pip时,我们经常只会安装一个包,但是却经常要安装依赖包,再删除时却只会删除我们安装的那个包,其它依赖包留了下来,这样就不好对包进行管理,下次我们安装相同包的不同版本时,就会出现目标......
  • CF1842H Tenzing and Random Real Numbers 题解
    题目链接点击打开链接题目解法实数的概率好反直觉!对\(1\)做限制不是很好做,考虑变成正负性的限制(即对\(0\)做限制)令\(y_i=x_i-0.5\),那么限制就变成了\(y_i+y_j\le0,\;y_i+y_j\ge0\)这里要给出一些实数概率的结论:实数下,\(x=y\)的概率为\(0\),因为\(\frac{1}{\inft......
  • C++多态与虚拟:Objects 实例化(Objects Instantiation)探究
    一、Objects的创建依据已有的classCPoint,我们可以产生一个或多个object(对象),或者说是产生一个instance(实体):CPointaPoint(7.2);//aPoint._x初始值为7.2aPoint.x(5.3);//aPoint._x现值为5.3这样的objects可能放在函数的stack之中(对象是在函数内部创建的,......
  • centos7虚拟机配置ens网卡静态地址还是会dhcp分配一个地址?
    centos7虚拟机配置ens网卡静态地址还是会dhcp分配一个地址?问题现象[root@cent0s7~]#ipa1:lo:<LOOPBACK,UP,LOWER_UP>mtu65536qdiscnoqueuestateUNKNOWNgroupdefaultqlen1000link/loopback00:00:00:00:00:00brd00:00:00:00:00:00inet127.0.0.1/8s......
  • 在JavaScript中,DOM对象与jQuery对象的区别与转换
    Dom原生对象和jQuery对象的区别:jQuery选择器得到的jQuery对象和标准的js中的document.getElementById()取得的dom对象是两种不同类型,两者不等价。注:js原生获取的dom是一个对象;jQuery对象就是一个数组对象。JQuery无法使用DOM对象的任何方法,同样的DOM对象也不能使用JQuery里......
  • KVM虚拟机迁移(静态)
    1.查看虚拟机状态,确认关闭状态virshlist--all 2.查看虚拟机文件位置virshdomblklistzabbix3.导出配置文件并查看导出文件virshdumpxmlzabbix>/root/zabbix.xml 4.把刚导出的配置文件传到目的服务制定路径(路径为虚拟机配置文件位置) scpzabbix.xml10.10.7.13......
  • 移除 Parallels Access Sound 虚拟设备
    在安装了Parallels之后,发现Mac没声音,打开声音设置一看音频输出设备被设为了ParallelsAccessSound。把输出设备调回MacBook扬声器就有声音了。但是音频输出设备经常被自动切换回ParallelsAccessSound。于是我决定移除这个设备。打开/Library/Audio/Plug-Ins/HAL文......
  • DOM的节点类型和新增节点
    nodeType:nodeNamenodeTypenodeValue元素1标签元素文本3标签内的文本注释8注释新增节点:vartest=function(){vardiv=document.creatElement("div");div.setAttribute=("style","color:red");div.innerHTML="这是d......