Vue原理从模板到DOM的简要流程

jiezi

5 年前

写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue 版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者拉到下面 关注公众号 也可以吧

【Vue 原理】从模板到 DOM 的简要流程

今天的计划是，探索 Vue 模板挂载到页面是怎么样的一个流程，内容是指正常 HTML 标签的模板挂载，这部分内容很重要。

而这部分内容也是为了讲解 Component 作为铺垫，因为到最后 Component 必然也是作为一个正常标签去挂载，所以先把这部分抽出来讲

首先，这个流程，个人认为可以分为两大部分，分别是 init 和 mount

顾名思义，init 必定是和初始化有关，mount 和挂载 DOM 有关

首先，当你开始调用 Vue 的时候，比如这样

// js

new Vue({el: document.getElementsByTagName("div")[0],

})


// html，够简洁了吧

<div></div>

那么，先进入的肯定是 Vue 这个构造函数，呈上来！

function Vue(options) {this._init(options);

}

Vue.prototype._init = function(options) {    

    // 初始化 选项，computed，data 之类的

    // 初始化实例，给实例绑定些方法
    // 触发 beforeCreated，created 钩子

}

这个 _init 方法，是构建 Vue 实例的时候调用的，而创建 Vue 实例，并非只有通过 new Vue 创建，有可能是 Vue 内部创建的，比如 component

所以，才需要提取出一个 init 方法

然后，init 到这里就结束了，下面就到了另一个流程 mount

init 结束，就开始解析模板啦，生成 DOM 啦，挂载 DOM 啦之类的

开始正文，首先，从什么时候开始？此时需要亮出 _init 方法，没错，就是上面出现的方法

其实在这个方法的最后，有一个调用执行挂载 DOM 的方法，如下

Vue.prototype._init = function(options) {
    .....
    if (vm.$options.el) {vm.$mount(vm.$options.el);
    }
}

可以看到一句代码，vm.$mount，没错，就在这里开启了 DOM 挂载的里程碑

但是，等等，有限制条件 vm.$options.el，也就是，必须有传入 el 才会在最后调用挂载 DOM

所以，并不是所有的 Vue 实例新建都会在 init 结尾调用 vm.$mount 去挂载 DOM，比如 component 两个过程就是分开的

我们还是先来看看 vm.$mount 吧

Vue.prototype.$mount = function(el) {return mountComponent(this, query(el))

};

var mount = Vue.prototype.$mount;

Vue.prototype.$mount = function(el) {

    ... 解析模板，生成模板渲染函数，保存渲染函数到 options    

    return mount.call(this, el)

}

原样呈现了，Vue 中有两个 $mount 函数，第一个的作用是给第二个 调用...... 如果大家看源码，不要搞混了喂

其中涉及到一个函数，mountComponent，速看

function mountComponent(vm, el) {new Watcher(vm, function() {vm._update(vm._render()
    })    
    return v
}

function Watcher(vm, expOrFn) {    

    this.getter = expOrFn;    

    this.get();}

Watcher.prototype.get = function() {value = this.getter(vm);
}

上面代码的作用可以说是，为 Vue 实例新建监听者 watcher，并设置一个更新函数

而这个更新函数，会在新建 watcher 后马上执行，就是马上执行了一遍这行代码

vm._update(vm._render())

这个函数的作用是，执行之前解析得到的【渲染函数】，渲染函数执行完会返回一个模板对应的【VNode】

vm._render 再把这个 vnode 返回

于是就把这个 vnode，传给了 vm._update 中当做了第一个参数

render 函数的内容其实非常的多，但是这里一笔带过，只用知道是用来生成 Vnode 就好了，具体的内容会有具体的文章讲解

Vue.prototype._render = function() {vnode = render();    

    return vnode
}

这个函数的作用是，对比 vnode，挂载更新 DOM

1、如果存在旧 vnode，那么会对比旧 vnode 和刚传入的新 vnode，不断地 patch 得到最小变化单位，从而只更新这部分 DOM

2、如果不存在旧 vnode，那么就直接把 vnode 转换为 dom 挂载到页面

其中，生成 DOM 和挂载 DOM 用到的方法是 createElm

方法很简单，无非就是通过标签名创建 DOM，然后插入到页面中

function createElm(vnode, parentElm, refElm) {  

    var children = vnode.children;    

    var tag = vnode.tag;

    vnode.elm = document.createElement(tag);   


    // 不断递归遍历子节点

    createChildren(vnode, children);    

    // 插入 DOM 节点

    insert(parentElm, vnode.elm, refElm);
}

function createChildren(vnode, children) {if (Array.isArray(children)) {for (var i = 0; i < children.length; ++i) {createElm(children[i], vnode.elm, null);
        }
    }
}

function insert(parent, elm, ref) {if (parent) {   

        // 如果存在兄弟节点，就查到兄弟前面

        if (ref) {       

            // 兄弟节点的父节点和 本节点父节点相同

            if (ref.parentNode === parent) {parent.insertBefore(elm, ref);
            }
        } 

        // 如果没有兄弟节点，就直接查到父节点最后
        else {parent.appendChild(elm);
        }
    }
}

两个过程如下

1、初始化选项

2、初始化实例

1、解析模板，生成并保存渲染函数

2、新建 watcher 并立即执行更新函数 vm._update(vm._render)

3、vm._render 调用渲染函数生成 VNode，传给 vm._update

4、调用 vm._update，根据 VNode 生成 DOM 并挂载

Vue原理从模板到DOM的简要流程

Init

Mount

1、vm._render

2、vm._update

总结

init

mount