vue 2x源码分析（三）---虚拟dom

以前用jq，我们都是直接操作dom，为什么要使用虚拟dom，虚拟dom的优势是什么，虚拟dom是如何实现的，vue里面的虚拟dom是怎么样的？

what

虚拟dom是在js里面模拟dom

why

原生dom操作在dom数过多，或者绑定事件过多的时候都会出现性能问题，dom直接操作很慢，后来react首先使用了虚拟dom，它用js模拟vnode树，在重新渲染的时候比对两颗dom树，只做最小范围的渲染，从而提高了性能。

how

创建一个dom需要知道dom元素的标签名，属性键值对，绑定事件，子节点。

//vdom/create-element.js
function _createElement ( 
 context: Component, 
 tag?: string | Class | Function | Object, 
 data?: VNodeData, 
 children?: VNodeChildren | void
)

• helpers 处理方法参数
  • index.js
  • merge-hook 合并节点钩子
  • normalize-children 处理子节点
  • update-listeners 更新监听器

• patch 对比两个vnode,渲染页面

function sameVnode (vnode1, vnode2) { 
 return (    vnode1.key === vnode2.key &&    vnode1.tag === vnode2.tag &&    vnode1.isComment === vnode2.isComment &&    !vnode1.data === !vnode2.data  )
}
function createKeyToOldIdx (children, beginIdx, endIdx) {
  let i, key  const map = {}  for (i = beginIdx; i <= endIdx; ++i) {    key = children[i].key    if (isDef(key)) map[key] = i  }  return map
}
...

只介绍了vue中虚拟dom的核心代码