VUE 源碼學習01 源碼入口

VUE【version：2.4.1】

Vue項目作了很多，最近在學習設計模式與Vue源碼，記錄一下本身的腳印！共勉！注：此處源碼學習方式爲先了解其大模塊，從宏觀再去到微觀學習，以避免一開始就研究細節而後出不來~

從package.json文件知道咱們在執行命令npm run dev（只是以dev爲例prod同樣） 對應的是config.js文件裏面的web-full-dev，而後找到config.js文件

config.js
'web-full-dev': {
entry: resolve('web/entry-runtime-with-compiler.js'),
}

這裏就能清楚的知道配置入口文件是 entry-runtime-with-compiler.js

entry-runtime-with-compiler.js
import config from 'core/config'
import Vue from './runtime/index'
export default Vue

這裏我就只主要寫出了文件的導入和導出，這裏就能知道這個文件只是爲了導出一個Vue,那這個Vue具體的來源呢，繼續看import的Vue的來源

runtime/index.js
import Vue from 'core/index'

該怎樣繼續不用囉嗦了，繼續找 core/index.js

你會發現最後找到了 instance/index.js

此時你已經找到了核心初始化的代碼！

instance/index.js
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,而且整個Vue的核心方法都到場了

1.//初始化的入口，各類初始化工做
2.initMixin(Vue) 
3.//數據綁定的核心方法，包括經常使用的$watch方法
4.stateMixin(Vue)
5.//事件的核心方法，包括經常使用的$on，$off，$emit方法
6.eventsMixin(Vue)
7.//生命週期的核心方法
8.lifecycleMixin(Vue)
9.//渲染的核心方法，用來生成render函數以及VNode
10.renderMixin(Vue)

至此，咱們已經找到核心VUE文件入口，這個instance/index.js文件通過mixin各個模塊以後返回了構造函數Vue,以examples文件夾裏面commits例子來講明，當咱們new Vue()的時候，就調用這個構造函數，而後代碼從this._init(options)進入主題！

後續在進行下面各個功能模塊探究！