虚拟DOM最核心的部分是patch,它通过Vue-Diff算法,比对新旧两个vnode之间有哪些不同,然后根据比对结果找出需要更新的节点进行更新,最终将vnode渲染成真实的DOM。整个patch的过程,其实就是创建节点、删除节点和修改节点的过程。
创建节点
当因状态改变而新增的节点在DOM中并不存在时,我们需要创建一个节点并插入到DOM中。即当oldVnode不存在而vnode存在时,就需要使用vnode生成真实的DOM元素并将其插入到视图当中。
创建新增的节点主要有以下两种场景:
场景1:
首次渲染时,DOM中不存在任何节点,即oldVnode是不存在的,我们需要使用vnode创建一个新DOM节点并渲染视图。
场景2:
当vnode 和oldVnode完全不是同一个节点时,即oldVnode是一个被废弃的节点,vnode是一个全新的节点,此时,我们需要使用vnode创建一个新DOM节点,用它去替换oldVnode所对应的真实DOM节点。
- 如何创建节点
因vnode是有类型的,所以当我们在创建节点时,最重要的事是根据vnode的类型来创建出相同类型的DOM元素。
事实上,只有三种类型的节点会被创建并插入到DOM中:元素节点、注释节点和文本节点。
0.创建元素节点判断vnode是否是元素节点,只需要判断它是否具有tag属性。如果一个vnode具有tag属性,就认为它是元素节点,然后我们调用当前环境下的createElement方法来创建真实的元素节点。1.创建注释节点当发现一个vnode的tag属性不存在时,可以用isComment属性来判断它是注释节点还是文本节点。如果是注