Vue2源码学习(三)入口

通过构建出来的Vue.js在src/platforms/web/entry-runtime-with-compiler.js
这个文件中有引用到类似vue的东西:import Vue from './runtime/index'

下面看一下这个文件:
可以看到文件中又有应用到类似vue的东西:
import Vue from 'core/index'

那我们再继续看看这个文件:
结果一看又是相似的场景:
import Vue from './instance/index'

那就继续咬着牙往下看:

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
  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)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

功夫不负有心人,总算是看到的vue的真正的面目了。

function Vue (options) {
  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)
}

而剩下的`xxxMixin```主要是对vue原型的一些扩展。

回到上面的core/index文件可以看到引用了./global-api/index
这里就是在 Vue 上扩展的一些全局方法的定义

总结:
core/index文件主要是对vue的初始化
./instance/index中使用了许多xxxMixin对vue原型进行了扩展

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在分析Vue的源码之前我们需要了解一些前置知识,如Flow、源码目录、构建方式、编译入口等。 认识 Flow Fl...
    oWSQo阅读 4,766评论 1 2
  • 放弃指南 看了挺多源码分析 打算自己撸一遍源码。 希望加深下理解 也更好的学习。 用于自己以后再阅读理解。 希望自...
    俺是种瓜低阅读 3,388评论 0 7
  • core package 概要:Core是所有其他包的基础包.它提供了大部分功能包括metadata,templa...
    LOVE小狼阅读 7,563评论 0 3
  • 源码版本:v2.1.10 分析目标 通过阅读源码,对 Vue2 的基础运行机制有所了解,主要是: Vue2 中数据...
    NARUTO_86阅读 14,240评论 6 26
  • 好久没有写日记了。。。今天我专心学习webpack,跟着网上的文章请练完这16个webpack小例子翻译阮一峰大神...
    还有谁叫李狗蛋阅读 10,484评论 1 6