【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