校招刷题群
高效刷题 迎战校招
校招精选试题
近年面笔经面经群内分享
Java刷题群 前端刷题群 产品运营群
首页 > js语言和框架 > vue重排与重绘-diff
题目

简述Vue中的diff算法

解答

当我们当前组件所依赖的数值更新和组件创建时运行update函数,update函数会调用组件的render函数,render生成新的虚拟dom树,update的到新虚拟dom树的根节点,然后进入update函数内部,将_vnode也就是旧虚拟dom树替换成新的虚拟dom树,然后用一个变量将旧虚拟dom树保存起来,接下来调用patch函数进行diff比对,vue在进行比对时遵循以下原则:

1.尽量不动
2.能修改属性修改属性
3.能移动dom移动dom
4.实在不行再删除或新增真实dom

然后vue的diff会根据新旧domTree进行深度优先同层比对,如果父节点比对发现不同则父节点的所有子节点无需进行比对跟着父节点一起死去,如果父节点比对发现相同则继续往下比对父节点的子节点然后再进行下一个父节点的子节点进行比较,以此递归比较下去,比较时首先会比较标签名是否一致,然后会比较元素的key值是否相同,如果是input元素则还会比较type类型,如果都相同表示相同,如果有一个不相同表示不相同,vue的diff算法会在新旧dom树的头尾处记录头尾指针位置,相互聚拢,逐渐比较,来保证真实dom的高复用,当新虚拟dom树的头指针大于新虚拟dom树的尾指针则表示新虚拟dom树比对完成,diff结束,然后vue会根据新虚拟dom树的比对结果的真实dom树加入根节点中完成页面真实dom渲染完毕。

C 0条回复 评论

帖子还没人回复快来抢沙发