vue源码入口文件分析(推荐)


Posted in Javascript onJanuary 30, 2018

开发vue项目有段时间了, 之前用angularjs 后来用 reactjs 但是那时候一直没有时间把自己看源码的思考记录下来,现在我不想再浪费这 来之不易的思考, 我要坚持!!

看源码我个人感觉非常开心,每每看上一段,自己就充实许多,不知道你是否和我一样。

vue 源码是众多module(模块)用 rollup 工具合并而成, 从package.json 中能够看到。现在让我们从github上下载vue项目,开始我们今天的“思考”。

我下载的源码版本是:"version": "2.5.7",

源码起始位置从这里可以看到

"dev": "rollup -w -c build/config.js --environment TARGET:web-full-dev"

// 从build/config.js 中找到 TARGET: web-full-dev 这是运行和编译(支持现在的浏览器,由于里面大量应用了ES6-7)后的

 // Runtime+compiler development build (Browser)
 'web-full-dev': {
  entry: resolve('web/entry-runtime-with-compiler.js'),
  dest: resolve('dist/vue.js'),
  format: 'umd',
  env: 'development',
  alias: { he: './entity-decoder' },
  banner
 },

找到了开始文件就是 "web/entry-runtime-with-compiler.js", 然后我们一路找 Vue 对象 终于在 “instance/index.js” 中找到了:

// 这是Vue 的开始位置
function Vue (options) {
 // 判断如果是不是生产环境,且不是通过new关键字来创建对象的话,就在控制台打印一个warning
 if (process.env.NODE_ENV !== 'production' &&
  !(this instanceof Vue)
 ) {
  warn('Vue is a constructor and should be called with the `new` keyword')
 }
 this._init(options)
}

看似到这里都结束了,因为我们目的就是找到开始位置,但是我有个疑问,为什么Vue需要这么多层 ?

entry-runtime-with-compiler.js
->
runtime/index.js
->
core/index.js
->
instance/index.js

当我仔细看了源码后恍然大悟,我们先看看他们这些文件都做了什么:

(1)instance/index.js

从Vue 模块命名中能看出一些端倪, instance (实例) 。

这个文件是Vue 对象的开始,同时也是Vue 原型链(prototype) 方法的集中文件

// _init
initMixin(Vue)
// $set、$delete、$watch
stateMixin(Vue)
// $on、$once、$off、$emit
eventsMixin(Vue)
// _update、$forceUpdate、$destroy
lifecycleMixin(Vue)
// $nextTick、_render、以及多个内部调用的方法
renderMixin(Vue)

这些方法只有实例化了才能调用。

(2)core/index.js

这个文件在Instance/index.js 创建和初步加工后,再次加工。 那他主要做了什么呢? 我们不考虑运行环境

initGlobalAPI(Vue)

对,就调用了这个方法,很简单明了吧 --- "初始化全局接口",

让我们走进initGlobalAPI 方法

export function initGlobalAPI (Vue: GlobalAPI) {
 // config
 const configDef = {}
 configDef.get = () => config
 // 在 非生产环境,如何修改了配置文件config里面的内容会提示警告
 if (process.env.NODE_ENV !== 'production') {
  configDef.set = () => {
   warn(
    'Do not replace the Vue.config object, set individual fields instead.'
   )
  }
 }
 // 定义config 属性, 监听变化
 Object.defineProperty(Vue, 'config', configDef)

 // exposed util methods.
 // NOTE: these are not considered part of the public API - avoid relying on
 // them unless you are aware of the risk.
 Vue.util = {
  warn,
  extend,
  mergeOptions,
  defineReactive
 }

 Vue.set = set
 Vue.delete = del
 Vue.nextTick = nextTick

 Vue.options = Object.create(null)
 // 给vue 创建 ASSET_TYPES 的 空对象
 ASSET_TYPES.forEach(type => {
  Vue.options[type + 's'] = Object.create(null)
 })

 // this is used to identify the "base" constructor to extend all plain-object
 // components with in Weex's multi-instance scenarios.
 Vue.options._base = Vue

 extend(Vue.options.components, builtInComponents)
 // Vue.use
 initUse(Vue)
 // Vue.mixin
 initMixin(Vue)
 // Vue.extend
 initExtend(Vue)
 // Vue.component, Vue.directive, Vue.filter
 initAssetRegisters(Vue)
}

这里面基本都是 静态方法,即:用 Vue. xxx 的形式调用。

(3)runtime/index.js

这里就加一些扩展和 在 Vue.prototype上添加了__patch__和$mount(挂载元素)。

// Vue.options.directives(model和show)和 Vue.options.components(Transition和TransitionGroup)
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop

// public mount method
Vue.prototype.$mount = function (
 el?: string | Element,
 hydrating?: boolean
): Component {
 el = el && inBrowser ? query(el) : undefined
 return mountComponent(this, el, hydrating)
}

(4)entry-runtime-with-compiler.js

就干了一件事就是重写$mount, Vue根据不同运行环境,重写不同$mount

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
 el?: string | Element,
 hydrating?: boolean
): Component {
 ...
 return mount.call(this, el, hydrating)
}

总结:

到此我们找到了开始执行的文件,和每个文件有什么用,具体怎么做的,做了什么我会下次再写。不过我们刚开始不要太在乎每个细节,不要非得弄懂每一行代码,如果那样,真的太累了,而且可能没有勇气坚持下去。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
javascript使用canvas实现饼状图效果
Sep 08 Javascript
Vue精简版风格指南(推荐)
Jan 30 #Javascript
详解javascript常用工具类的封装
Jan 30 #Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 #Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 #Javascript
浅析vue深复制
Jan 29 #Javascript
浅析从vue源码看观察者模式
Jan 29 #Javascript
实例学习JavaScript读取和写入cookie
Jan 29 #Javascript
You might like
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
带你认识Django
2019/01/15 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
Django REST framework 分页的实现代码
2019/06/19 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
技校生自我鉴定
2013/12/08 职场文书
办公室岗位职责
2014/02/12 职场文书
行政副总岗位职责
2014/02/23 职场文书
意向书范本
2014/07/29 职场文书
社区娱乐活动方案
2014/08/21 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript