>[success] # 阅读Snabbdom ~~~ 1.因为Vue 2.x 内部使用的 'Virtual DOM' 就是改造的 'Snabbdom',了解'Snabbdom'对虚拟dom 操作可以更方便理解vue这块的实现理解 2.snabbdom 整个使用过程可以总结 2.1.使用'init' 创建生成'patch' 2.2.使用'h()'函数创建虚拟dom 2.3.使用'patch()' 比较新旧两个 VNode 2.4.把变化的内容更新到真实 DOM 树上 ~~~ [参考一个全程带注释链接](https://github.com/tramp-xu/codeAnalysis/blob/master/snabbdom-js/snabbdom.js) >[danger] ##### 结构目录说明 ~~~ │ h.ts h()函数，用来创建 VNode │ hooks.ts 所有钩子函数的定义 │ htmldomapi.ts 对 DOM API 的包装 │ is.ts 判断数组和原始值的函数 │ jsx-global.d.ts jsx 的类型声明文件 │ jsx.ts 处理 jsx │ snabbdom.bundle.ts 入口，已经注册了模块 │ snabbdom.ts 初始化，返回 init/h/thunk │ thunk.ts 优化处理，对复杂视图不可变值得优化 │ tovnode.ts DOM 转换成 VNode │ vnode.ts 虚拟节点定义 │ ├─helpers │ attachto.ts 定义了 vnode.ts 中 AttachData 的数据结构 │ └─modules 所有模块定义 / 钩子函数 attributes.ts class.ts dataset.ts eventlisteners.ts hero.ts example 中使用到的自定义钩子 module.ts 定义了模块中用到的钩子函数 props.ts style.ts ~~~