Vue源码解读学习笔记系列，逐步深入解读Vue设计和源码。
——CafuChino
从虚拟DOM说起
在使用Vue之前，Web项目最常用的库是Jquery。Jquery封装了各种常用的domApi，可以大大简化dom操作的难度，所以广受欢迎。但是无论是使用原生Js还是Jquery，当页面进行更新时依然要进行大量的DOM操作，如果要更改一个数据，可能需要逐层找到它的DOM元素，然后在对其进行更改。在开发大型项目时可能一次性要对大量DOM进行操作，这不仅会加大开发难度，还会加剧性能消耗。为什么？
DOM对象及其复杂，一个对象上有大量的属性和方法。在操作DOM对象的时候难免需要进行DOM对象和JS对象的相互转化，这一过程会造成很大的性能消耗。
DOM树发生变化或对CSS进行修改的时候，会造成重排（
relayout）和重绘（repaint），这一过程会进一步加剧性能消耗。
所以要优化页面性能，可以从两个方面入手：
减少js对象和dom对象之间的转换次数
减少不必要的dom操作
那么如果可以在一开始就维护和dom树相同的js对象结构，并且只更新需要更新的位置，便可以极大的优化性能。而用js对象来表示dom的形式就被称为虚拟dom。
Snabbdom
在使用Vue的时候，对于函数h()肯定不陌生。它在main.js中就曾出现过：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
而其中的h函数就来源于Snabbdom这一虚拟dom库，其特点是简洁，模块化，高度可定制，号称是最快的Virtual Dom。Vue就是采用了修改过的Snabbdom作为虚拟dom核心。
Snabbdom源码解析
Snabbdom项目结构
├─package
│ │ h.ts（定义了h函数，用来创建Vnode）
│ │ hooks.ts（定义钩子函数）
│ │ htmldomapi.ts（封装了dom操作）
│ │ init.ts(导出了init函数)
│ │ is.ts（判断类型）
│ │ jsx-global.ts（jsx相关）
│ │ jsx.ts（jsx相关）
│ │ thunk.ts（优化）
│ │ tovnode.ts（把dom转换为vnode）
│ │ ts-transform-js-extension.cjs
│ │ tsconfig.json
│ │ vnode.ts（定义了虚拟节点的结构，创建vnode）
│ │
│ ├─helpers
│ │ attachto.ts
│ │
│ └─modules
│ attributes.ts（处理元素属性，处理布尔型）
│ class.ts（切换类样式）
│ dataset.ts（设置html5 的deta-*自定义属性）
│ eventlisteners.ts（注册和移除事件）
│ hero.ts（示例自定义模块）
│ module.ts（定义模块中要使用的钩子函数）
│ props.ts（处理元素属性，不处理布尔型）
│ style.ts（设置行内样式，动画）
│
└─test
│ tsconfig.json
│
├─benchmark
│ core.ts
│
└─unit
attachto.ts
attributes.ts
core.ts
dataset.ts
eventlisteners.ts
htmldomapi.ts
jsx.tsx
style.ts
thunk.ts
package 中是我们主要要分析的内容，test 中主要是各种测试代码，暂时不看。snabbdom的核心仅仅提供了最基本的功能，函数和作用分别是：
-
init()——一个高阶函数，返回patch() -
h()——返回虚拟节点Vnode（使用Vue的时候见到过） -
thunk()——在处理不可变数据时的优化策略
而这些就可以实现Vue的视图部分——也就是把新数据渲染到页面的最基本功能了。如果我们视图在现在的基础上整理一下思路，那么应该是如：
创建想要渲染的内容的虚拟dom
将虚拟dom渲染到挂载位置（装换成真实dom-打补丁）
如果有更改，将更改渲染到网页上
其中负责挂载、对比等功能的就是init()返回的patch()函数，它负责比对新旧两个节点，并将新节点打补丁到旧节点上。而负责生成虚拟dom的就是h()了，至于thunk（）目前还用不到。
接下来我们来看一个实例
https://codepen.io/cafuchino/pen/xxEVNGJ
可以看到snabbdom帮助我们将虚拟dom渲染到了页面上，并且当点击按钮的时候进行了更新，而且成功更新了子元素。
下一篇我们将从源码解析snabbdom是如何实现这些功能的。
