前言
Vue2内部使用的虚拟DOM是改造的Snabbdom,先理解Snabbdom的使用以及分析其源码，能为后续深入了解Vue框架打下良好的基础。
Snabbom特点
- Vue.js2.x内部使用的虚拟DOM就是改造的Snabbdom
- 大约200 SLOC(single line of code)
- 通过模块可扩展
- 源码使用TypeScript开发
- 最快的Vitual DOM之一
初步示例代码
import {init} from 'snabbdom/build/package/init'
import {h} from 'snabbdom/build/package/h'
const patch = init([])
//h函数生成vnode用来描述真实DOM
let vnode = h('div#constainer.cls', 'hello world')
let app = document.querySelector('#app')
//patch函数根据diff算法比较新旧两个VNode，并将变化的内容更新到真实 DOM 树上
let oldVnode = patch(app, vnode)
Snabbdom核心
- init()设置模块，创建patch()函数
- 使用h()函数创建Javascript对象(Vnode)描述真实DOM
- patch()比较新旧两个VNode
- 把变化的内容更新到真实DOM树
源码分析
- 宏观理解，看源码过程中不求甚解
- 核心重点分析h、init、patch三个函数
- 分析patch函数时，又需要理解createElm、removeVnodes、addVnodes、patchVnode、updateChildren等内部函数的具体实现
- 最后体会下vnode带key的意义
分析链接
未完待续
