Vue.js源码分析04—— patchVnode和createElm

下面我们来分析下这两个函数，这两个函数我们就不贴源码了，主要讲下大概流程，感兴趣的可以根据地址去看对应源码

patchVnode

他的作用是对比新旧vnode, 也就是执行diff算法找到差异，更新到真实dom。函数定义在core/vdom/patch.js里面

Created with Raphaël 2.2.0 开始 新节点没有文本 新老节点是否都有子节点并且不相等 对子节点，把子节点的差异更新到真实dom 新节点有子节点，老节点没有子节点 先清空老节点dom的文本内容清空，为当前dom节点加入子节点 老节点有子节点，新节点没有 删除老节点中所有的子节点 老节点有文本，新节点没有文本 清空老节点的文本内容 新老节点的文本节点不相等 修改老节点的文本 yes no yes no yes no yes no yes yes

createElm

他的作用是把vnode转成真实dom，然后挂载到dom树上。函数定义在core/vdom/patch.js里面

Created with Raphaël 2.2.0 开始 判断vnode中是否有tag? 判断是否是未知标签，如果是报警告 创建对应的dom元素 为vnode的dom元素设置样式scope vnode中所有的子元素转成dom对象 把创建好的dom对象挂载到dom树上 结束 判断vnode是否是注释节点? 创建一个注释节点挂载到dom树上 判断vnode是否是文本节点? 创建文本节点挂载到dom树上 yes no yes no yes