【Vue原理】Compile - 源码版 之 从新建实例到 compile结束的主要流程

写文章不容易，点个赞呗兄弟


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

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

【Vue原理】Compile - 源码版 之 从新建实例到 compile结束的主要流程

Compile 的内容十分之多，今天先来个热身，先不研究 compile 内部编译细节，而是记录一下

从新建实例开始，到结束 compile ，其中的大致外部流程，不涉及 compile 的内部流程

或者说，我们要研究 compile 这个函数是怎么生成的

注意，如果你没有准备好，请不要阅读这篇文章

注意哦，会很绕，别晕了

好的，正文开始

首先，当我们通过 Vue 新建一个实例的时候会调用Vue

所以从 Vue 函数入手

function Vue(){    

    // .....

    vm.$mount(vm.$options.el);
}

然后内部的其他处理都可以忽视，直接定位到 vm.$mount，就是从这里开始去编译的

继续去查找这个函数

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



    var options = this.$options;

   

    if (!options.render) {  

     

        var tpl= options.template;  

   

        // 获取模板字符串
        if (tpl) {    

                // 根据传入的选择器找到元素，然后拿到该元素内的模板

                //  本来有很多种获取方式，但是为了简单，我们简化为一种，知道意思就可以了

            tpl = document.querySelector(tpl).innerHTML;
        }    

     

        if (tpl) {  

            // 生成 render 函数保存

            var ref = compileToFunctions(tpl, {},this);  

          

            // 每一个组件，都有自己的 render

            options.render = ref.render
            options.staticRenderFns =ref.staticRenderFns;
        }
    }      



    // 执行上面生成的 render，生成DOM，挂载DOM，这里忽略不讨论
    return mount.call(this, el)
};

compile 的主要作用就是，根据 template 模板，生成 render 函数

那么到这里，整个流程就走完了，因为 render 已经在这里生成了

我们观察到

在上面这个函数中，主要就做了三件事

1 获取 template 模板

根据你传入的参数，来各种获取 template 模板

这里应该都看得懂了，根据DOM，或者根据选择器

2 生成 render

通过 compileToFunctions ，传入 template

就可以生成 render 和 staticRenderFns

看着是挺简单哦，就一个 compileToFunctions，但是我告诉你，这个函数的诞生可不是这么容易的，兜兜转转，十分曲折，相当得曲折复杂，没错，这就是我们下面研究的重点

但是这流程其实好像也没有什么帮助？但是如果你阅读源码的话，或许可以对你理清源码有些许帮助吧

再一次佩服 尤大的脑回路

3 保存 render

保存在 vm.$options 上，用于在后面调用

下面就来说 compileToFunctions 的诞生史

注意，很绕很绕，做好心理准备

首先我定位到 compileToFunctions，看到下面这段代码

var ref$1 = createCompiler();



// compileToFunctions 会返回 render 函数 以及 staticRenderFns

var compileToFunctions = ref$1.compileToFunctions;

于是我知道

compileToFunctions 是 createCompiler 执行返回的！！

那么继续定位 createCompiler

---

createCompiler

var createCompiler = createCompilerCreator(  



    function baseCompile(template, options) {    

    

        var ast = parse(template.trim(), options);    

    

        if (options.optimize !== false) {

            optimize(ast, options);
        }    

   

        var code = generate(ast, options);  

     

        return {            

            ast: ast,            

            render: code.render,            

            staticRenderFns: code.staticRenderFns

        }
    }
);

卧槽，又来一个函数，别晕啊兄弟

不过，注意注意，这里是重点，非常重

首先明确两点

1、createCompiler 是 createCompilerCreator 生成的

2、给 createCompilerCreator 传了一个函数 baseCompile

baseCompile

这个 baseCompile 就是 生成 render 的大佬

看到里面包含了 渲染三巨头，【parse，optimize，generate】

但是今天不是讲这个的，这三个东西，每个内容都十分巨大

这里先跳过，反正 baseCompile 很重要，会在后面被调用到，得先记着

然后，没错，我们又遇到了一个 函数 createCompilerCreator ，定位它！

---

createCompilerCreator

function createCompilerCreator(baseCompile) {    



    return function () {

       

        // 作用是合并选项，并且调用 baseCompile
        function compile(template) {  

         

            // baseCompile 就是 上一步传入的，这里执行得到 {ast,render,statickRenderFn}

            var compiled = baseCompile(template);            

            return compiled

        }        

        return {          



            // compile 执行会返回 baseCompile 返回的 字符串 render

            compile: compile,      

     

            // 为了创建一层 缓存闭包，并且闭包保存 compile

            // 得到一个函数，这个函数是 把 render 字符串包在 函数 中
            compileToFunctions: createCompileToFunctionFn(compile)
        }
    }
}

这个函数执行过后，会返回一个函数

很明显，返回的函数就 直接赋值 给了上面讲的的 createCompiler

我们看下这个返回给 createCompiler 的函数里面都干了什么？

生成一个函数 compile

内部存在一个函数 compile，这个函数主要作用是

调用 baseCompile，把 baseCompile 执行结果 return 出去

baseCompile 之前我们强调过的，就是那个生成 render 的大佬

忘记的，可以回头看看，执行完毕会返回

{ render，staticRenderFns }

返回 compileToFunctions 和 compile

其实 返回的这两个函数的作用大致都是一样的

都是为了执行上面那个 内部 compile

但是为什么分出一个 compileToFunctions 呢？

还记得开篇我们的 compileToFunctions 吗

就是那个在 vm.$mount 里我们要探索的东西啊

就是他这个吊毛，生成的 render 和 staticRenderFns

再看看那个 内部 compile，可以看到他执行完就是返回

{ render, staticRenderFns }

你看，内部 compile 就是 【vm.$mount 执行的 compileToFunctions】 啊

为什么 compileToFunctions 没有直接赋值为 compile 呢！！

因为要做模板缓存！！

可以看到，没有直接让 compileToFunctions = 内部compile

而是把 内部 compile 传给了 createCompileToFunctionFn

没错 createCompileToFunctionFn 就是做缓存的

为了避免每个实例都被编译很多次，所以做缓存，编译一次之后就直接取缓存

createCompileToFunctionFn

来看看内部的源码，缓存的代码已经标红

function createCompileToFunctionFn(compile) {    



    // 作为缓存，防止每次都重新编译

    // template 字符串 为 key ， 值是 render 和 staticRenderFns
    var cache = Object.create(null);    



    return function compileToFunctions(template, options, vm) {        

        var key = template;        



        // 有缓存的时候直接取出缓存中的结果即可

        if (cache[key]) return cache[key]  

     

        // compile 是 createCompileCreator 传入的compile

        var compiled = compile(template, options);        

        var res = {            



            // compiled.render 是字符串，需要转成函数

            render : new Function(compiled.render)
            staticRenderFns : compiled.staticRenderFns.map(function(code) {                

                return  new Function(code, fnGenErrors)

            });
        };        



        return (cache[key] = res)

    }
}

额外：render 字符串变成可执行函数

var res = {    

    render: new Function(compiled.render) ,    

    staticRenderFns: compiled.staticRenderFns.map(function(code) {        

        return new Function(code, fnGenErrors)

    });
};

这段代码把 render 字符串可执行函数，因为render生成的形态是一个字符串，如果后期要调用运行，比如转成函数

所以这里使用了 new Function() 转化成函数

同理，staticRenderFns 也一样，只不过他是数组，需要遍历，逐个转化成函数

他的缓存是怎么做的

使用一个 cache 闭包变量

template 为 key

生成的 render 作为 value

当实例第一次渲染解析，就会被存到 cache 中

当实例第二次渲染解析，那么就会从 cache 中直接获取

什么时候实例会解析第二次？

比如 页面A到页面B，页面B又转到页面A。

页面A 这个实例，按理就需要解析两次，但是有缓存之后就不会

---

理清思路

也就是说，compileToFunctions 其实内核就是 baseCompile！

不过 compileToFunctions 是经过了 两波包装的 baseCompile

第一波包装在 createCompilerCreator 中的 内部 compile 函数中

内部函数的作用是

合并公共options和 自定义options ，但是相关代码已经省略，

另一个就是执行 baseCompile

第二波包装在 createCompileToFunctions 中，目的是进行 缓存