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 表单验证扩展代码(一)
Oct 11 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
JS修改css样式style浅谈
May 06 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
JavaScript实现刮刮乐效果
Nov 01 Javascript
js 数组 fill() 填充方法
Nov 02 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环境无法上传文件的解决方法
2014/04/30 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
python简单读取大文件的方法
2016/07/01 Python
python实现发送邮件功能
2017/07/22 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python input函数使用实例解析
2019/11/22 Python
浅析Python 责任链设计模式
2020/09/11 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
求职信的七个关键技巧
2014/02/05 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
田径运动会通讯稿
2015/07/18 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis