vue源码分析（compile篇）

function Compile(el, vm) {
    this.$vm = vm;//vm 是MVVM的实例 
    // 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.$options.beforeMounted && this.$vm.$options.beforeMounted();
        this.init();//初始化
        this.$el.appendChild(this.$fragment); //添加到当前节点中
 
        this.$vm.$options.mounted && this.$vm.$options.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(el) {
        //初始化数据,保存所有子节点   保存this
        var childNodes = el.childNodes,
            me = this; //暂存this
 
        //对所有子节点进行递归遍历
        [].slice.call(childNodes).forEach(function(node) {
            //text节点的文本内容
            var text = node.textContent;