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)進入主題！

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