- 使用前端框架(angular/vue/react)带来哪些好处,相对于使用jQuery click
jquery通过操作dom进行完成视图更新,vue通过改变数据来完成更新视图;
过程是数据改变 =====> 虚拟DOM计算变更 ====> 操作真实DOM ===> 视图更新;从改变数据到视图更新不直接操作dom,操作dom的过程是由框架来完成的。
虚拟DOM:js模拟,如下题图一右侧
- vue框架中的diff算法是如何优化渲染的计算或者优化效率的 click
使用虚拟DOM模拟真实DOM目的:计算最小变化,再更新真实DOM结构。
过程:
1、遍历老虚拟DOM
2、遍历新虚拟DOM(发现更新和新增)
3、根据变化重新排序
若有1000个节点,需要计算1000^3次,该算法性能不佳
优化:
1、只比较同一层级,不跨级比较
2、比较标签名。标签名不同直接删除,不继续深度比较,创建新节点
3、标签名相同,key相同就认为是同一个节点,不继续深度比较;key不同创建新节点
1000个节点只比较1000次
key:唯一确定一个dom元素,diff算法更高效
左边为真实DOM,右边为虚拟DOM
diff算法
patch渲染虚拟dom:
第一次将虚拟dom渲染关联到空容器(element)中;
后期,虚拟dom发生变化,判断是否是同一个vnode(key和tag是否 都 相同)
是:使用新虚拟dom(vnode)替换旧虚拟dom;===>patchVnode
不是:创建新DOM元素,删除旧DOM元素
patchVnode:
1、获取真实dom元素
2、children:老children==新children?
相同: 不做任何操作,返回
不同:
新vnode有text & 无children
text不等:老vnode有children,直接移除;更新text
新vnode无text & 有children
老vnode有child===>updateChildren
老vnode无children \=\=有text :清空text & 添加新children
... ... ...
updateChildren:涉及 删除、增加、排序
1、定义oldStartIndx、oldEndIndx、newStartIndx、newEndIndx
2、每次都排列组合做 4 个比较,是否存在同一个节点(tag+key),同一个节点不做变化,比较的节点后移(前面出现相同节点)或前移(后面出现相同节点)获得下一个进行比较的节点,开始判断下一个,直到所有节点都判断完
3、所有节点都不相同:查找key对应元素,判断tag是否想等
tag相等:更新node
tag不相等:创建新node
优化diff算法,每个节点都是vnode,
updateChildren:
startidx进行移动,
- vue中 key 值的作用 click
1、key的作用主要是高效的更新虚拟DOM,原理:vue在patch过程中可以精准判断两个节点是否为同一个,从而避免频繁更新不同元素,使得patch过程更加高效。减少DOM操作量,提高性能。(简言之:起个名字更好找。五个相同标签p,要在第三个位置插入新标签,若五个标签没有名字,需要挨个进行比较,到第三个的时候,原来的位置换内容,第四个也换,第五个也换,并且创建第六个节点存放原来第五个的内容,三次更新+一次创建。若有了名字,只需要从第一个开始比较,再比较第二个,比较第三个的时候发现不同,换一端进行比较,发现相同(正序走不通走倒序)最后在第三个前面插入新元素,总共只创建了一个元素。)
2、不设置key还可能在列表更新时引发隐蔽bug
3、vue在使用相同标签名元素的过度切换时,也会使用key,目的时为了vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果