专栏首页Vue源码 & 前端进阶体系【Vue原理】Compile - 源码版 之 从新建实例到 compile结束的主要流程

【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 中,目的是进行 缓存

公众号
公众号

本文分享自微信公众号 - 神仙朱(skying-zhu)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VueJs里定义类去引用实现赋值加页面刷新

    最近项目中要做前端的东西,前阵子简单学习了一点Vue,所以这次项目中直接用Vue来进行编码,因为这个项目的目的主要就是练习加提高自己,所以就边学边做。

    Vaccae
  • Vue + Flask 小知识(三)

    我们做一个简单的页面,两个输入框用来输入搜索条件,一个表格用来展示数据,先看下页面效果

    周萝卜
  • 基于SpringCloud的RBAC权限管理系统

    基于 Spring Cloud Greenwich.SR2 、Spring Security OAuth2 的RBAC权限管理系统;基于数据驱动视图的理念封装 ...

    程序源代码
  • .net Core创建vuejs应用

    在cmd中输入dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

    Vaccae
  • .net Core中Vue.js里使用Element-UI

    每次自己尝试用新东西时,所花的时间真的不是一般的多,以前刚开始学Vue的时候用VSCode直接引入ElementUI比较简单,这次项目因为用.net Core生...

    Vaccae
  • 【JS】218-JavaScript简史:从网景到前端框架三巨头

    从上世纪 90 年代中期发行以来,JavaScript 就已经成为最流行的 Web 开发语言之一了。尽管 JavaScript 最初只是一个浏览器脚本语言,但是...

    pingan8787
  • 【Vuejs】242-7个有用的Vue开发技巧

    随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用...

    pingan8787
  • 【干货】Vue TypeScript根据类生成签名字符串

    今天我们来说一下VueJs里根据类生成签名,标题里面说了TypeScript是因为语法相对于JavaScript严格的多,导致里面一个小问题又花费了我一两天的时...

    Vaccae
  • 实习一周的总结

    实习一周的感觉,就是,因为我大学学的不是计算机专业的,所以没有多大经验,包括自己自学的话,是有很多局限性的,因为不知道外面企业的项目是怎么写的,而且我自己在自学...

    公众号---志学Python
  • 【Vuejs】212- 如何优雅的在 vue 中添加权限控制

    本文转载自掘金专栏,作者:邪瓶张起灵https://juejin.im/post/5c7bae3ff265da2db27950f3

    pingan8787

扫码关注云+社区

领取腾讯云代金券