根据调试工具看Vue源码之虚拟dom（一）

た入场券 2022-01-20 15:57 332阅读 0赞

### 初次探索 ###

#### 什么是虚拟`dom` ####

`Vue` 通过建立一个虚拟 `DOM` 对真实 `DOM` 发生的变化保持追踪。请仔细看这行代码：

return createElement('h1', this.blogTitle)
    复制代码

`createElement` 到底会返回什么呢？其实不是一个实际的 `DOM` 元素。它更准确的名字可能是 `createNodeDescription`，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点。我们把这样的节点描述为“虚拟节点 (`Virtual Node`)”，也常简写它为“`VNode`”。“虚拟 `DOM`”是我们对由 `Vue` 组件树建立起来的整个 `VNode` 树的称呼。

以上这段对虚拟`Dom`的简短介绍来自`Vue`的[官网][Link 1]

#### 第一个断点 ####

我们一开始的断点先打在`app.vue`的两个`hook`上：

export default {
        name: 'app',
        created () {
            debugger
        },
        mounted () {
            debugger
        }
    }
    复制代码

刷新页面，此时调用栈中显示的函数跟预想中的不太一样：

在`created`这个`hook`执行之前，多出了一些比较奇怪的函数：

*  `createComponentInstanceForVnode`
 *  `Vue._update`
 *  `mountComponent`

?看完以后我心中出现了一个疑问：

> 为什么在`created`钩子执行之前就出现了`mountComponent`这个方法，到底是文档出问题了，还是文档出问题了呢？带着这个疑惑我们接着往下看

#### `mountComponent`做了什么？ ####

通过上面打第一个断点，其实不难看出这样的执行顺序（从上往下）：

*  `(annoymous)`
 *  `Vue.$mount`
 *  `mountComponent`

`(annoymous)`这步其实就是在执行我们的`main.js`，代码很短：

...
    new Vue({
        render: h => h(App)
    }).$mount('#app')
    复制代码

##### `Vue.$mount` #####

Vue.prototype.$mount = function ( el, hydrating ) {
        // 判断是否处于浏览器的环境
        el = el && inBrowser ? query(el) : undefined;
        // 执行mountComponent
        return mountComponent(this, el, hydrating)
    };
    复制代码

##### `mountComponent` #####

简单罗列下上面这两段代码的逻辑?：

*  调用`beforeMount`钩子函数
 *  封装一个`updateComponent`函数
 *  执行`new Watcher`并将`updateComponent`当做参数传入
 *  调用`vm._update`方法

#### `_update`方法是如何被触发的？ ####

##### `Watcher` #####

简单梳理下上面这段代码的逻辑：

*  新建`Watcher`实例时，将`updateComponent`赋值给`getter`属性
 *  通过`this.get`方法，触发`updateComponent`函数
 *  最终拿到函数的执行结果

#### 小结 ####

通过上面的分析我们可以初步得出一个结论：

> 组件的渲染跟`Watcher`离不开关系，父组件在执行完`created`钩子函数之后，会调用`updateComponent`函数对子组件进行处理

### 深入研究 ###

如果前面你动手跟着断点一直走，那么不难得知存在这样的调用关系（从上往下）：

*  ...
 *  `mountComponent`
 *  `Watcher`
 *  `get`
 *  `updateComponent`
 *  `Vue._update`
 *  `patch`
 *  `createElm`
 *  `createComponent`
 *  `init`
 *  `createComponentInstanceForVnode`
 *  `VueComponent`
 *  `Vue._init`
 *  `callHook`
 *  `invokeWithErrorHandling`
 *  `created`

#### `Vue.prototype._update` ####

Vue.prototype._update = function (vnode, hydrating) {
        var vm = this;
        var prevEl = vm.$el;
        var prevVnode = vm._vnode;
        // 重存储当前父实例
        var restoreActiveInstance = setActiveInstance(vm);
        vm._vnode = vnode;
        // Vue.prototype.__patch__ is injected in entry points
        // based on the rendering backend used.
        if (!prevVnode) {
          // initial render
          vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */);
        } else {
          // 执行patch函数
          vm.$el = vm.__patch__(prevVnode, vnode);
        }
        restoreActiveInstance();
        ...
      };
    复制代码

当然，我们通过全局检索可以得知`_patch`函数相关的代码?:

// 只在浏览器环境下patch函数有效
    Vue.prototype.__patch__ = inBrowser ? patch : noop;
    复制代码

var patch = createPatchFunction({ nodeOps: nodeOps, modules: modules });
    function createPatchFunction (backend) {
        ...
        return function patch (oldVnode, vnode, hydrating, removeOnly) {
            ...
        }
    }
    复制代码

这里先不深究`patch`的实现，我们只要知道`patch`是使用`createPatchFunction`来生成的一个闭包函数即可。

#### 子组件的渲染 ####

我们注意到，在子组件`created`钩子执行之前存在一个`init`方法?: