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

你可能感兴趣的:(Vue.js源码分析,vue,vue.js)