VueJS学习之旅 03

前面两部分介绍了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对象。
以后就可以具体到代码中一探究竟了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,083评论 8 124
  • 沉默如此 文/纾寒 南方的冬天快要结束,空气中还夹杂着冰冷入骨的水汽。她拖着行李箱走过那栋因为假期将至而毫无生气的...
    纾寒阅读 331评论 0 0
  • 白日里 你是树旁的一粒沙 狂风吹过 无奈地被卷起 风儿丝毫不顾及 你的恐高 你只能在风中 飞扬 飞扬 飞扬 暗夜里...
    碎碎念小乖阅读 367评论 5 9