什么是虚拟dom?
虚拟dom是指用js来描述的HTML的结构
为什么用引用虚拟dom?
因为重新渲染数据会引起dom的重绘和回流(重排),这对性能消耗消耗是非常大的,我们在开发的时候尽量避免重绘和回流。因此vue就引入了虚拟dom,也就是virtual dom,这样可以避免直接频繁操作真实的dom,以此来减少性能消耗。
diff算法的守则
- 只比较同一层级,不跨级比较
- 标签名不同,直接删除,不继续深度比较
- 标签名相同,key相同,就认为是相同节点,不继续深度比较
通过h函数生成VNode,VNode中包含一些参数,元素,如div等,data,如class属性或者绑定事件或者样式,children子节点,text文本等。elm,虚拟节点挂载到真实节点
patch函数
patch函数在首次页面渲染的时候会执行一次,将vnode元素渲染到一个空的容器里,更新的时候再调用patch函数,用新的vnode代替老的vnode,在patch函数中,如果key和tag都相同,则执行patchvnode函数
如果比较两个VNode的key和sel元素相同,则说明是同一个VNode,执行patchVNode函数,否则创建新的dom元素更新dom元素
patchVNode函数
在patchvnode函数中,会有很多情况,如果新的vnode和老的vnode中都有children,则会执行updatechildren方法更新children
看是否是指同一个对象,如果是,直接return
看文本节点是否相等,如果不相等,新的替换旧的
比较子节点, 如果新节点有,旧的没有,直接新增
比较子节点,如果新的没有,旧的有,直接删除
如果都有,就执行更新子节点函数
仅记录