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 相关文章推荐
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
JavaScript实现分页效果
Mar 28 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
浅析Vue 生命周期
Jun 21 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
关于php开启错误提示的总结
2019/09/24 PHP
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
python链接Oracle数据库的方法
2015/06/28 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
scrapy爬虫实例分享
2017/12/28 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
python多线程抽象编程模型详解
2019/03/20 Python
详解Python self 参数
2019/08/30 Python
生物科学专业职业规划书范文
2014/02/11 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
物理学专业求职信
2014/07/04 职场文书
钱学森观后感
2015/06/04 职场文书
退休教师追悼词
2015/06/23 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers
Win2008系统搭建DHCP服务器
2022/06/25 Servers