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 相关文章推荐
picChange 图片切换特效的函数代码
May 06 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
js实现随机点名器精简版
Jun 29 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基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
PHP学习记录之数组函数
2018/06/01 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
Django验证码的生成与使用示例
2017/05/20 Python
python下10个简单实例代码
2017/11/15 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
python中wheel的用法整理
2020/06/15 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
毕业生找工作自荐书
2014/06/30 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
学生退学证明
2015/06/23 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
使用golang编写一个并发工作队列
2021/05/08 Golang
使用refresh_token实现无感刷新页面
2022/04/26 Javascript
python双向链表实例详解
2022/05/25 Python