Vue2 原始碼漫遊（一）
描述：
Vue框架中的基本原理可能大家都基本瞭解了，但是還沒有漫遊一下原始碼。
所以，覺得還是有必要跑一下。
由於是程式碼漫遊，所以大部分為關鍵性程式碼，以主線路和主要分支的程式碼為主，大部分理解都寫在程式碼註釋中。複製程式碼一、程式碼主線
檔案結構1-->4，程式碼執行順序4-->1
1.platforms/web/entry-runtime.js/index.js
web不同平臺入口；
/* @flow */
import Vue from './runtime/index'
export default Vue複製程式碼2.runtime/index.js
為Vue配置一些屬性方法
/* @flow */
import Vue from 'core/index'
import config from 'core/config'
import { extend, noop } from 'shared/util'
import { mountComponent } from 'core/instance/lifecycle'
import { devtools, inBrowser, isChrome } from 'core/util/index'
import {
query,
mustUseProp,
isReservedTag,
isReservedAttr,
getTagNamespace,
isUnknownElement
} from 'web/util/index'
import { patch } from './patch'
import platformDirectives from './directives/index'
import platformComponents from './components/index'
// install platform specific utils
Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement
// install platform runtime directives & components
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)
}
// devtools global hook
/* istanbul ignore next */
Vue.nextTick(() => {
if (config.devtools) {
if (devtools) {
devtools.emit('init', Vue)
} else if (process.env.NODE_ENV !== 'production' && isChrome) {
console[console.info ? 'info' : 'log'](
'Download the Vue Devtools extension for a better development experience:\n' +
'https://github.com/vuejs/vue-devtools'
)
}
}
if (process.env.NODE_ENV !== 'production' &&
config.productionTip !== false &&
inBrowser && typeof console !== 'undefined'
) {
console[console.info ? 'info' : 'log'](
`You are running Vue in development mode.\n` +
`Make sure to turn on production mode when deploying for production.\n` +
`See more tips at https://vuejs.org/guide/deployment.html`
)
}
}, 0)
export default Vue複製程式碼3.core/index.js
/* @flow */
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,建立了一個configDef物件，最終目的是為了Object.defineProperty(Vue, 'config', configDef)
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)
// 具體Vue.congfig的具體內容就要看../config檔案了
// exposed util methods.
// NOTE: these are not considered part of the public API - avoid relying on them unless you are aware of the risk.
// 新增一些方法，但是該方法並不是公共API的一部分。原始碼中引入了flow.js
Vue.util = {
warn, // 檢視'../util/debug'
extend,//檢視'../sharde/util'
mergeOptions,//檢視'../util/options'
defineReactive//檢視'../observe/index'
}
Vue.set = set //檢視'../observe/index'
Vue.delete = del//檢視'../observe/index'
Vue.nextTick = nextTick//檢視'../util/next-click'.在callbacks中註冊回撥函式
// 建立一個純淨的options物件，新增components、directives、filters屬性
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
// ../components/keep-alive.js 拷貝元件物件。該部分最重要的一部分。
extend(Vue.options.components, builtInComponents)
// Vue.options = {
// components : {
// KeepAlive : {
// name : 'keep-alive',
// abstract : true,
// created : function created(){},
// destoryed : function destoryed(){},
// props : {
// exclude : [String, RegExp, Array],
// includen : [String, RegExp, Array],
// max : [String, Number]
// },
// render : function render(){},
// watch : {
// exclude : function exclude(){},
// includen : function includen(){},
// }
// },
// directives : {},
// filters : {},
// _base : Vue
// }
// }
// 新增Vue.use方法，使用外掛，內部維護一個外掛列表_installedPlugins，如果外掛有install方法就執行自己的install方法，否則如果plugin是一個function就執行這個方法，傳參(this, args)
initUse(Vue)
// ./mixin.js 新增Vue.mixin方法，this.options = mergeOptions(this.options, mixin)，
initMixin(Vue)
// ./extend.js 新增Vue.cid（每一個夠著函式例項都有一個cid，方便快取），Vue.extend(options)方法
initExtend(Vue)
// ./assets.js 建立收集方法Vue[type] = function (id: string, definition: Function | Object)，其中type ： component / directive / filter
initAssetRegisters(Vue)
}複製程式碼Vue.util物件的部分解釋：
- Vue.util.warn
warn(msg, vm) 警告方法程式碼在util/debug.js， 通過var trac = generateComponentTrace(vm)方法vm=vm.$parent遞迴收集到msg出處。 然後判斷是否存在console物件，如果有 console.error(`[Vue warn]: ${msg}${trace}`)。 如果config.warnHandle存在config.warnHandler.call(null, msg, vm, trace)複製程式碼- Vue.util.extend
extend (to: Object, _from: ?Object):Object Object型別淺拷貝方法程式碼在shared/util.js複製程式碼 - Vue.util.mergeOptions
合併，vue例項化和實現繼承的核心方法，程式碼在shared/options.js
)mergeOptions ( parent: Object, child: Object, vm?: Component複製程式碼
先通過normalizeProps、normalizeInject、normalizeDirectives以Object-base標準化，然後依據strats合併策略進行合併。
strats是對data、props、watch、methods等例項化引數的合併策略。除此之外還有defaultStrat預設策略。
後期暴露的mixin和Vue.extend()就是從這裡出來的。[官網解釋][1] - Vue.util.defineReactive
大家都知道的資料劫持核心方法，程式碼在shared/util.js
)defineReactive ( obj: Object, key: string, val: any, customSetter?: ?Function, shallow?: boolean複製程式碼
- Vue.util.extend
4.instance/index.js Vue物件生成檔案
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) {
// 判斷是否是new呼叫。
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._init(options)內部方法，./init.js
initMixin(Vue)
/**
* ./state.js
* 新增屬性和方法
* Vue.prototype.$data
* Vue.prototype.$props
* Vue.prototype.$watch
* Vue.prototype.$set
* Vue.prototype.$delete
*/
stateMixin(Vue)
/**
* ./event.js
* 新增例項事件
* Vue.prototype.$on
* Vue.prototype.$once
* Vue.prototype.$off
* Vue.prototype.$emit
*/
eventsMixin(Vue)
/**
* ./lifecycle.js
* 新增例項生命週期方法
* Vue.prototype._update
* Vue.prototype.$forceUpdate
* Vue.prototype.$destroy
*/
lifecycleMixin(Vue)
/**
* ./render.js
* 新增例項渲染方法
* 通過執行installRenderHelpers(Vue.prototype);為例項新增很多helper
* Vue.prototype.$nextTick
* Vue.prototype._render
*/
renderMixin(Vue)
export default Vue複製程式碼5.instance/init.js
初始化,完成主元件的所有動作的主線。從這兒出發可以理清observer、watcher、compiler 、render等
import config from '../config'
import { initProxy } from './proxy'
import { initState } from './state'
import { initRender } from './render'
import { initEvents } from './events'
import { mark, measure } from '../util/perf'
import { initLifecycle, callHook } from './lifecycle'
import { initProvide, initInjections } from './inject'
import { extend, mergeOptions, formatComponentName } from '../util/index'
let uid = 0
export function initMixin (Vue: Class<Component>) {
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++
let startTag, endTag
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${vm._uid}`
endTag = `vue-perf-end:${vm._uid}`
mark(startTag)
}
// a flag to avoid this being observed
vm._isVue = true
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
// expose real self
vm._self = vm
initLifecycle(vm)
initEvents(vm)
/**
* 新增vm.$createElement vm.$vnode vm.$slots vm.
* 建立vm.$attrs / vm.$listeners 並且轉換為getter和setter
*
*/
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props vm.$scopedSlots
/**
* 1、建立 vm._watchers = [];
* 2、執行if (opts.props) { initProps(vm, opts.props); } 驗證props後呼叫defineReactive轉化，並且代理資料proxy(vm, "_props", key);
* 3、執行if (opts.methods) { initMethods(vm, opts.methods); } 然後vm[key] = methods[key] == null ? noop : bind(methods[key], vm);
* 4、處理data,
* if (opts.data) {
* initData(vm);
* } else {
* observe(vm._data = {}, true /* asRootData */);
* }
* 5、執行initData:
* （1）先判斷data的屬性是否有與methods和props值同名
* （2）獲取vm.data（如果為function，執行getData(data, vm)），代理proxy(vm, "_data", key);
* （3）執行 observe(data, true /* asRootData */);遞迴觀察
* 6、完成observe，具體看解釋
*/
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false)
mark(endTag)
measure(`vue ${vm._name} init`, startTag, endTag)
}
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
}複製程式碼二、observe 響應式資料轉換
1.前置方法 observe(value, asRootData)
function observe (value, asRootData) {
// 如果value不是是Object 或者是VNode這不用轉換
if (!isObject(value) || value instanceof VNode) {
return
}
var ob;
// 如果已經轉換就複用
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__;
} else if (
//一堆必要的條件判斷
observerState.shouldConvert &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
//這才是observe主體
ob = new Observer(value);
}
if (asRootData && ob) {
ob.vmCount++;
}
return ob
}複製程式碼2.Observer 類
var Observer = function Observer (value) {
// 當asRootData = true時，其實可以將value當做vm.$options.data，後面都這樣方便理解
this.value = value;
/**
* 為vm.data建立一個dep例項，可以理解為一個專屬事件列表維護物件
* 例如： this.dep = { id : 156, subs : [] }
* 例項方法： this.dep.__proto__ = { addSub, removeSub, depend, notify, constructor }
*/
this.dep = new Dep();
//記錄關聯的vm例項的數量
this.vmCount = 0;
//為vm.data 新增__ob__屬性，值為當前observe例項，並且轉化為響應式資料。所以看一個value是否為響應式就可以看他有沒有__ob__屬性
def(value, '__ob__', this);
//響應式資料轉換分為陣列、物件兩種。
if (Array.isArray(value)) {
var augment = hasProto
? protoAugment
: copyAugment;
augment(value, arrayMethods, arrayKeys);
this.observeArray(value);
} else {
//物件的轉換，而且walk是Observer的例項方法，請記住
this.walk(value);
}
};複製程式碼3.walk
該方法要將vm.data的所有屬性都轉化為getter/setter模式，所以vm.data只能是Object。陣列的轉換不一樣，這裡暫不做講解。
Observer.prototype.walk = function walk (obj) {
// 得到key的列表
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
//核心方法：定義響應式資料的方法 defineReactive(物件, 屬性, 值);這樣看是不是就很爽了
defineReactive(obj, keys[i], obj[keys[i]]);
}
};複製程式碼4.defineReactive(obj, key, value)
function defineReactive (
obj,
key,
val,
customSetter, //自定義setter，為了測試
shallow //是否只轉換這一個屬性後代不管控制引數,false ：是，true ： 否
) {
/**
* 又是一個dep例項，其實作用與observe中的dep功能一樣，不同點：
* 1.observe例項的dep物件是父級vm.data的訂閱者維護物件
* 2.這個dep是vm.data的屬性key的訂閱者維護物件，因為val有可能也是物件
* 3.這裡的dep沒有寫this.dep是因為defineReactive是一個方法，不是建構函式，所以使用閉包鎖在記憶體中
*/
var dep = new Dep();
// 獲取key的屬性描述符
var property = Object.getOwnPropertyDescriptor(obj, key);
// 如果key屬性不可設定，則退出該函式
if (property && property.configurable === false) {
return
}
// 為了配合那些已經的定義了getter/setter的情況
var getter = property && property.get;
var setter = property && property.set;
//遞迴，因為沒有傳asRootData為true，所以vm.data的vmCount是部分計數的。因為它還是屬於vm的資料
var childOb = !shallow && observe(val);
/**
* 全部完成後observe也就完成了。但是，每個屬性的dep都沒啟作用。
* 這就是所謂的依賴收集了，後面繼續。
*/
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
var value = getter ? getter.call(obj) : val;
if (Dep.target) {
dep.depend();
if (childOb) {
childOb.dep.depend();
if (Array.isArray(value)) {
dependArray(value);
}
}
}
return value
},
set: function reactiveSetter (newVal) {
var value = getter ? getter.call(obj) : val;
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter();
}
if (setter) {
setter.call(obj, newVal);
} else {
val = newVal;
}
childOb = !shallow && observe(newVal);
dep.notify();
}
});
}複製程式碼三、依賴收集
一些個人理解：
1、Watcher 訂閱者
可以將它理解為，要做什麼。具體的體現就是Watcher的第二個引數expOrFn。
2、Observer 觀察者
其實觀察的體現就是getter/setter能夠觀察資料的變化（陣列的實現不同）。
3、dependency collection 依賴收集
訂閱者(Watcher)是幹事情的，是一些指令、方法、表示式的執行形式。它執行的過程中肯定離不開資料，所以就成了這些資料的依賴專案。因為離不開^_^資料。
資料是肯定會變的，那麼資料變了就得通知資料的依賴專案(Watcher)讓他們再執行一下。
依賴同一個資料的依賴專案(Watcher)可能會很多，為了保證能夠都通知到，所以需要收集一下。
4、Dep 依賴收集器建構函式
因為資料是由深度的，在不同的深度有不同的依賴，所以我們需要一個容器來裝起來。
Dep.target的作用是保證資料在收集依賴項(Watcher)時，watcher是對這個資料依賴的，然後一個個去收集的。複製程式碼1、Watcher
Watcher (vm, expOrFn, cb, options)
引數：
{string | Function} expOrFn
{Function | Object} callback
{Object} [options]
{boolean} deep
{boolean} user
{boolean} lazy
{boolean} sync
在Vue的整個生命週期當中，會有4類地方會例項化Watcher：
Vue例項化的過程中有watch選項
Vue例項化的過程中有computed計算屬性選項
Vue原型上有掛載$watch方法: Vue.prototype.$watch，可以直接通過例項呼叫this.$watch方法
Vue生成了render函式，更新檢視時
Watcher接收的引數當中expOrFn定義了用以獲取watcher的getter函式。expOrFn可以有2種型別：string或function.若為string型別，
首先會通過parsePath方法去對string進行分割(僅支援.號形式的物件訪問)。在除了computed選項外，其他幾種例項化watcher的方式都
是在例項化過程中完成求值及依賴的收集工作：this.value = this.lazy ? undefined : this.get().在Watcher的get方法中:複製程式碼var Watcher = function Watcher (
vm,
expOrFn,
cb,
options
) {
this.vm = vm;
vm._watchers.push(this);
// options
if (options) {
this.deep = !!options.deep;
this.user = !!options.user;
this.lazy = !!options.lazy;
this.sync = !!options.sync;
} else {
this.deep = this.user = this.lazy = this.sync = false;
}
//相關屬性
this.cb = cb;
this.id = ++uid$2; // uid for batching
this.active = true;
this.dirty = this.lazy; // for lazy watchers
//
this.deps = [];
this.newDeps = [];
//set型別的ids
this.depIds = new _Set();
this.newDepIds = new _Set();
// 表示式
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: '';
// 建立一個getter
if (typeof expOrFn === 'function') {
this.getter = expOrFn;
} else {
this.getter = parsePath(expOrFn);
if (!this.getter) {
this.getter = function () {};
process.env.NODE_ENV !== 'production' && warn(
"Failed watching path: \"" + expOrFn + "\" " +
'Watcher only accepts simple dot-delimited paths. ' +
'For full control, use a function instead.',
vm
);
}
}
this.value = this.lazy
? undefined
: this.get();//執行get收集依賴項
};複製程式碼2、Watcher.prototype.get
通過設定觀察值(this.value)呼叫this.get方法，執行this.getter.call(vm, vm)，這個過程中只要獲取了某個響應式資料。那麼肯定會觸發該資料的getter方法。因為當前的Dep.target = watcher。所以就將該watcher作為了這個響應資料的依賴項。因為watcher在執行過程中的確需要、使用了它、所以依賴它。
Watcher.prototype.get = function get () {
//將這個watcher觀察者例項新增到Dep.target，表明當前為this.expressoin的依賴收集時間
pushTarget(this);
var value;
var vm = this.vm;
try {
/**
* 執行this.getter.call(vm, vm):
* 1、如果是function則相當於vm.expOrFn(vm)，只要在這個方法執行的過程中有從vm上獲取屬性值的都會觸發該屬性值的get方法從而完成依賴收集。因為現在Dep.target=this.
* 2、如果是字串（如a.b）,那麼this.getter.call(vm, vm)就相當於vm.a.b
*/
value = this.getter.call(vm, vm);
} catch (e) {
if (this.user) {
handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
} else {
throw e
}
} finally {
// "touch" every property so they are all tracked as
// dependencies for deep watching
if (this.deep) {
traverse(value);
}
popTarget();
this.cleanupDeps();
}
return value
};複製程式碼3、getter/setter
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
var value = getter ? getter.call(obj) : val;
if (Dep.target) {
//依賴收集，這裡又饒了一圈，看後面的解釋
dep.depend();
if (childOb) {
childOb.dep.depend();
if (Array.isArray(value)) {
dependArray(value);
}
}
}
return value
},
set: function reactiveSetter (newVal) {
var value = getter ? getter.call(obj) : val;
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter();
}
if (setter) {
setter.call(obj, newVal);
} else {
val = newVal;
}
childOb = !shallow && observe(newVal);
//資料變動出發所有依賴項
dep.notify();
}
});複製程式碼- 依賴收集具體動作：
//呼叫的自己dep的例項方法
Dep.prototype.depend = function depend () {
if (Dep.target) {
//呼叫的是當前Watcher例項的addDe方法，並且把dep物件傳過去了
Dep.target.addDep(this);
}
};
Watcher.prototype.addDep = function addDep (dep) {
var id = dep.id;
if (!this.newDepIds.has(id)) {
//為這個watcher統計內部依賴了多少個資料，以及其他公用該資料的watcher
this.newDepIds.add(id);
this.newDeps.push(dep);
if (!this.depIds.has(id)) {
//繼續為資料收集依賴專案的步驟
dep.addSub(this);
}
}
};
Dep.prototype.addSub = function addSub (sub) {
this.subs.push(sub);
};複製程式碼- 資料變動出發依賴動作：
Dep.prototype.notify = function notify () {
// stabilize the subscriber list first
var subs = this.subs.slice();
for (var i = 0, l = subs.length; i < l; i++) {
subs[i].update();
}
};
//對當前watcher的處理
Watcher.prototype.update = function update () {
/* istanbul ignore else */
if (this.lazy) {
this.dirty = true;
} else if (this.sync) {
this.run();
} else {
queueWatcher(this);
}
};
//把一個觀察者推入觀察者佇列。
//具有重複id的作業將被跳過，除非它是
//當佇列被重新整理時被推。
export function queueWatcher (watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
waiting = true
nextTick(flushSchedulerQueue)
}
}
}複製程式碼