美文网首页
VueJS学习之旅 03

VueJS学习之旅 03

作者: 小A家的铭 | 来源:发表于2017-01-16 10:14 被阅读0次

    前面两部分介绍了Vuejs的各个发布版本,以及它们的区别。也了解了VueJS源码的代码结构,以及基本的构建过程。
    下一代ES6 模块打包工具 rollup 是通过 entry 文件中的模块引入来分析依赖关系并完成代码打包的,所以下面我们的重点就是这个 entry 文件了。
    src/entries/web-runtime-with-compiler.js 为例。


    打开文件,第一行有个

    /* @flow */
    

    这又是什么,没见过,Google之。https://flowtype.org/
    原来这货时一个javascript静态类型检查器,代码中有个 .flowconfig 文件就是给它用的。好的,这不是我们的重点,略之。

    继续向下看代码
    下面就是一连串的import语句了,我们先来看看简单的

    import { warn, cached } from 'core/util/index'
    

    其实在 'core/util/index' 文件中并没有 warncached 的直接定义,也是从其他模块中引入的。具体来看一下,warn 是在 'core/util/debug' 模块中定义,而 cached 其实是在 'shared/util' 模块中定义的。
    细心的话就会发现,在 'core/util/index' 文件中引入 'shared/util' 的时候,相对路径是不正确的,rollup是如何找到它的?这里有必要介绍一下 alias
    我们回顾一下build的过程,有个 getConfig 函数中用到了 alias, 并且在build目录下面有个 alias.js 文件,其实里面已经记录了这些别名的映射关系,所以我们在import的时候就可以直接使用别名来导入模块了。

    import { query } from 'web/util/index'
    

    是从 'platforms/web/util/index' 中引入了 query 这个依赖。

    import { shouldDecodeNewlines } from 'web/util/compat'
    

    是从 'platforms/util/compat' 中引入shouldDecodeNewlines 这个依赖。

    import { compileToFunctions } from 'web/compiler/index'
    

    则是从 'platforms/compiler/index' 中引入 compileToFunctions 这个依赖的。

    import Vue from './web-runtime'
    

    看名字就知道这个才是重点。
    过一遍代码就会发现,这个文件的逻辑也相对简单。
    从 './web-runtime' 中引入了Vue构造器, 并对Vue.prototype.$mount进行了包装。

    1. 首先是判断给定的el参数是否是 <html><body>。如果是的话,就给出警告并返回当前vue的实例对象,不做其它处理。
    2. 然后判断当前vue实例对象是否配置了 render 属性。 如果没有就去查找或计算 template 属性,然后使用 compiler 模块构建 renderstaticRenderFns 方法, 并将其注入到当前vue实例对象中。
    3. 最后调用原始的Vue.prototype.$mount方法。

    另外,从 'build/config.js' 文件中可以知道 'web-runtime' 是构建 'vue.runtime.js' 的入口文件。而当前的构建入口文件,只是重用了 runtime 版本,并包装了compiler。

    打开 'vue.runtime.js' 文件,发现这也是对原始Vue构造器的包装。这样逐级向上查找,我们就会找到最最原始的Vue构造器是如何定义和扩展的。
    为何要如此关注Vue构造器的定义呢?因为个人理解在VueJS的开发中,最主要的就是如何去实例化Vue对象。
    以后就可以具体到代码中一探究竟了。

    相关文章

      网友评论

          本文标题:VueJS学习之旅 03

          本文链接:https://www.haomeiwen.com/subject/sqesbttx.html