淺析Vue原始碼（一）—— 造物創世

摘要： 宣告：英文註解為尤雨溪大神原著，中文為本人理解翻譯。水平有限若理解有誤請以原著為準，望指正，見諒哈~ 要是覺得還不錯，快給我個star，快點這裡 github Vue 專案的起源，其實是源於對Vue進行例項化： new Vue({ el: ..., data: ...,...

宣告：英文註解為尤雨溪大神原著，中文為本人理解翻譯。水平有限若理解有誤請以原著為準，望指正，見諒哈~

要是覺得還不錯，快給我個star，快點這裡 ofollow,noindex">github

Vue 專案的起源，其實是源於對Vue進行例項化：

new Vue({
el: ...,
data: ...,
....
})
複製程式碼

那麼在這次例項化的過程中，究竟發生了哪些行為？讓我們來一探究竟。開啟Vue的原始碼檔案，其核心程式碼在src/core目錄下。下面我們從入口檔案index.js開始進入：

// 這個應該是例項化的引入
import Vue from './instance/index'
//這個應該是初始化一些全域性API
import { initGlobalAPI } from './global-api/index'
// 這個應該是從判斷執行環境中的引入是否是ssr環境，是一個Boolea型別
import { isServerRendering } from 'core/util/env'
// 這個應該是virtualDom編譯成renderContext的方法
import { FunctionalRenderContext } from 'core/vdom/create-functional-component'
//這裡開始執行初始化全域性變數
initGlobalAPI(Vue)
//為Vue原型定義屬性$isServer
Object.defineProperty(Vue.prototype, '$isServer', {
get: isServerRendering
})
// 為Vue原型定義屬性$ssrContext
Object.defineProperty(Vue.prototype, '$ssrContext', {
get () {
/* istanbul ignore next */
return this.$vnode && this.$vnode.ssrContext
}
})
// 為vue原型定義當為ssr環境執行時去載入FunctionalRenderContext方法
// expose FunctionalRenderContext for ssr runtime helper installation
Object.defineProperty(Vue, 'FunctionalRenderContext', {
value: FunctionalRenderContext
})

Vue.version = '__VERSION__'
// 匯出Vue
export default Vue
複製程式碼

接下來我們來看一下各個載入檔案:

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 Class，然後又呼叫了一系列init、mixin這樣的方法來初始化一些功能，具體的我們後面在分析，不過通過程式碼我們可以確認的是：沒錯！這裡確實是匯出了一個 Vue 功能類。

import { initGlobalAPI } from './global-api/index'
複製程式碼

initGlobalAPI這個東西，其實在Vue官網上，就已經為我們說明了Vue的全域性屬性：

import config from '../config'
import { initUse } from './use'
import { initMixin } from './mixin'
import { initExtend } from './extend'
import { initAssetRegisters } from './assets'
import { set, del } from '../observer/index'
import { ASSET_TYPES } from 'shared/constants'
import builtInComponents from '../components/index'

import {
warn,
extend,
nextTick,
mergeOptions,
defineReactive
} from '../util/index'

export function initGlobalAPI (Vue: GlobalAPI) {
// config
const configDef = {}
configDef.get = () => config
if (process.env.NODE_ENV !== 'production') {
configDef.set = () => {
warn(
'Do not replace the Vue.config object, set individual fields instead.'
)
}
}
Object.defineProperty(Vue, 'config', configDef)
// 這些工具方法不視作全域性API的一部分，除非你已經意識到某些風險，否則不要去依賴他們
// 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)
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)
// 定義全域性方法
initUse(Vue)
initMixin(Vue)
initExtend(Vue)
initAssetRegisters(Vue)
}
複製程式碼

♦【Vue.config】 各種全域性配置項

♦【Vue.util】 各種工具函式，還有一些相容性的標誌位（哇，不用自己判斷瀏覽器了，Vue已經判斷好了） ♦【Vue.set/delete】 這個你文件應該見過

♦【Vue.nextTick】 這個是下一次更新前合併處理data變化做的一次優化

♦【Vue.options】 這個options和我們上面用來構造例項的options不一樣。這個是Vue預設提供的資源（元件指令過濾器）。

♦【Vue.use】 通過initUse方法定義

♦【Vue.mixin】 通過initMixin方法定義

♦【Vue.extend】通過initExtend方法定義

import { isServerRendering } from 'core/util/env'
複製程式碼

// 這個需要用懶載入在vue渲染前
// this needs to be lazy-evaled because vue may be required before
// ssr使用的時候要把VUE_ENV（vue環境）設定成'server'
// vue-server-renderer can set VUE_ENV
let _isServer
export const isServerRendering = () => {
if (_isServer === undefined) {
/* istanbul ignore if */
if (!inBrowser && !inWeex && typeof global !== 'undefined') {
// detect presence of vue-server-renderer and avoid
// Webpack shimming the process
_isServer = global['process'].env.VUE_ENV === 'server'
} else {
_isServer = false
}
}
return _isServer
}
複製程式碼

import { FunctionalRenderContext } from 'core/vdom/create-functional-component'
複製程式碼

export function FunctionalRenderContext (
data: VNodeData,
props: Object,
children: ?Array<VNode>,
parent: Component,
Ctor: Class<Component>
) {
const options = Ctor.options
// 確保createElement方法在components方法中
// ensure the createElement function in functional components
// 得到一個唯一的context上下文-主要是為了檢查是否有重複命名確保唯一性
// gets a unique context - this is necessary for correct named slot check
let contextVm
if (hasOwn(parent, '_uid')) {
// 表示不存在建立
contextVm = Object.create(parent)
// $flow-disable-line
contextVm._original = parent
} else {
// the context vm passed in is a functional context as well.
// in this case we want to make sure we are able to get a hold to the
// real context instance.
contextVm = parent
// $flow-disable-line
parent = parent._original
}
const isCompiled = isTrue(options._compiled)
const needNormalization = !isCompiled

this.data = data
this.props = props
this.children = children
this.parent = parent
this.listeners = data.on || emptyObject
this.injections = resolveInject(options.inject, parent)
this.slots = () => resolveSlots(children, parent)
// 支援把template編譯的方法
// support for compiled functional template
if (isCompiled) {
// exposing $options for renderStatic()
this.$options = options
// pre-resolve slots for renderSlot()
this.$slots = this.slots()
this.$scopedSlots = data.scopedSlots || emptyObject
}

if (options._scopeId) {
this._c = (a, b, c, d) => {
const vnode = createElement(contextVm, a, b, c, d, needNormalization)
if (vnode && !Array.isArray(vnode)) {
vnode.fnScopeId = options._scopeId
vnode.fnContext = parent
}
return vnode
}
} else {
this._c = (a, b, c, d) => createElement(contextVm, a, b, c, d, needNormalization)
}
}

installRenderHelpers(FunctionalRenderContext.prototype)
複製程式碼

到這裡，我們的入口檔案差不多就瞭解清楚了，接下來，我們開始去了解一下 Vue class 的具體實現，其中我們會了解到Vue的相關生命週期的知識。