VUE源码解读（1）

Vue源码解读学习笔记系列，逐步深入解读Vue设计和源码。

                                                        ——CafuChino

从虚拟DOM说起

在使用Vue之前，Web项目最常用的库是Jquery。Jquery封装了各种常用的domApi，可以大大简化dom操作的难度，所以广受欢迎。但是无论是使用原生Js还是Jquery，当页面进行更新时依然要进行大量的DOM操作，如果要更改一个数据，可能需要逐层找到它的DOM元素，然后在对其进行更改。在开发大型项目时可能一次性要对大量DOM进行操作，这不仅会加大开发难度，还会加剧性能消耗。为什么？

1. DOM对象及其复杂，一个对象上有大量的属性和方法。在操作DOM对象的时候难免需要进行DOM对象和JS对象的相互转化，这一过程会造成很大的性能消耗。

2. DOM树发生变化或对CSS进行修改的时候，会造成重排（relayout）和重绘（repaint），这一过程会进一步加剧性能消耗。

所以要优化页面性能，可以从两个方面入手：

1. 减少js对象和dom对象之间的转换次数

2. 减少不必要的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的核心仅仅提供了最基本的功能，函数和作用分别是：

1. init()——一个高阶函数，返回patch()
2. h()——返回虚拟节点Vnode（使用Vue的时候见到过）
3. thunk()——在处理不可变数据时的优化策略

而这些就可以实现Vue的视图部分——也就是把新数据渲染到页面的最基本功能了。如果我们视图在现在的基础上整理一下思路，那么应该是如：

• 创建想要渲染的内容的虚拟dom

• 将虚拟dom渲染到挂载位置（装换成真实dom-打补丁）

• 如果有更改，将更改渲染到网页上

其中负责挂载、对比等功能的就是init()返回的patch()函数，它负责比对新旧两个节点，并将新节点打补丁到旧节点上。而负责生成虚拟dom的就是h()了，至于thunk（）目前还用不到。

接下来我们来看一个实例

https://codepen.io/cafuchino/pen/xxEVNGJ

可以看到snabbdom帮助我们将虚拟dom渲染到了页面上，并且当点击按钮的时候进行了更新，而且成功更新了子元素。

下一篇我们将从源码解析snabbdom是如何实现这些功能的。