首页 技术 正文
技术 2022年11月20日
0 收藏 813 点赞 2,745 浏览 482 个字

什么是虚拟DOM树?(Virtual DOM)

    虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的

     01    当页面渲染的时候Vue会创建一颗虚拟DOM树

02    当页面发生改变Vue会再创建一颗新的虚拟DOM树

03    前后两颗新旧虚拟DOM树进行对比,Vue通过diff算法,去记录差异的地方

     04    将有差异的地方更新到真实的DOM树中

虚拟DOM树有什么用? 

  vue中的虚拟DOM树只会重新渲染页面修改的地方,大大减少了对真实DOM树的操作。 ——-虚拟DOM树是占内容的,但是可以帮我们提高DOM的性能。

  可以这样理解,虚拟DOM树是用空间(虚拟DOM树占空间)换时间(虚拟DOM树可以提高DOM效率)。

Vue  v-for 中 :key 到底有什么用?

   vue不直接操作真实的DOM树,通过虚拟DOM树就可以重新渲染修改的地方,影藏在背后的原理其实就是 diff 算法。

key的作用是为了高效的更新虚拟DOM树,提高查找的效率,一次性定位到要修改的元素

Vue的更新方式?

Vue是通过对比组件自身的新旧虚拟DOM进行更新的。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,992
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,506
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,349
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,134
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,766
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,844