vue源码中对compile的详解

Compile 是什么？

在vue中主要作用就是解析模板，解析数据和一些相关的指令，绑定函数更新视图。

通过源码我们就可以看到一些相关的知识：

function Compile(el, mvvm) {
   
    this.$vm = mvvm; //this Compile的实例  $vm 是MVVM的实例 (vm)
    // el  ==  "#app"  判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el中通,
    //如不是 则根据选择器 去查找对应的元素 然后保存
    this.$el = this.isElementNode(el) ? el : document.querySelector(el);

    //确定元素是否真正存在
    if (this.$el) {
   //#app
        this.$fragment = this.node2Fragment(this.$el);

        this.$vm.$pick.beforeMounted && this.$vm.$pick.beforeMounted();
        this.init();//初始化
        this.$el.appendChild(this.$fragment);//添加文档碎片

        this.$vm.$pick.mounted && this.$vm.$pick.mounted();
    }
}

Compile.prototype = {
   
    /**
     * node to fragment 把节点转换成文档碎片
     * @param el
     * @returns {DocumentFragment}
     */
    node2Fragment: function(el) {
   
        var fragment = document.createDocumentFragment(),//文档碎片
            child;

        // 将原生节点拷贝到fragment
        while (child = el.firstChild) {
   
            fragment.appendChild(child);
        }

        return fragment;//返回一个文档碎片
    },
    init: function() {
   //初始化函数
        //解析多个的元素节点
        this.compileElement(this.$fragment);
    },
    compileElement: function(ele) {
   //解析元素
        //初始化数据,保存所有子节点   保存this
        var childNodes = ele.childNodes,
        that = this;

        /*
        * 对所有子节点进行=>递归遍历
        * [].slice.call() 将伪数组arguments转为数组
        */
        [].slice.call(childNodes).forEach(function