從去年開始學習vue到今天有半年多的時間了，大部分功能也已經用的很熟練，所以是時候開始學習原始碼修煉修煉內功了，我會把自己學到看到的內容用最容易理解方式與大家分享，一起進步，如果文章有哪些不對的地方也歡迎大家指正。
老規矩，先放一張自己整理的圖：
vue版本:2.5.0
一.準備
在分析原始碼之前，我先說兩個關於資料繫結相關的知識點：
1. 物件的訪問器屬性——getter和setter：
Object有一個名為defineProperty的方法，可以設定訪問器屬性，比如：
當我們執行obj.a的時候會觸發get函式，控制檯會列印'this is the getter'，當我們為obj.a賦值的時候，obj.a=2;這是控制檯會列印"change new value"
大家可以把getter和setter理解成獲取物件屬性值和給物件屬性賦值時的鉤子就可以了。
2. 訂閱者模式：
訂閱者模式也叫“訂閱-釋出者模式”，對於前端來說這種模式簡直無處不在，比如我們常用的xx.addEventListener('click',cb,false)就是一個訂閱者，它訂閱了click事件，當在頁面觸發時，瀏覽器會作為釋出者告訴你，可以執行click的回撥函式cb了。
再舉一個更簡單的例子，士兵與長官就是一個訂閱與釋出者的關係，士兵的所有行動都通過長官來發布，只有長官發號施令，士兵們才能執行對應的行動。
在這段程式碼中，obj是釋出者，Watcher例項是訂閱者，Dep用來儲存訂閱者，以及接受釋出者通知的一個媒介。
另外，關於資料繫結還有一個知識點，那就是虛擬dom(vnode)，不過鑑於這部分東西太多，我就在文中一筆帶過了，今後會專門開一篇文章聊一聊vnode相關的內容。
二. 從data看資料繫結
1. 在vue/src/core/instance/index.js中：
function Vue (options) {
//options就是我們傳入new Vue中的el,data,props,methods等
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)
}
複製程式碼這段程式碼是我們執行new Vue()時執行的函式，它先判斷是否是使用new Vue()而不是Vue()建立例項，否則會有提示。接下來執行函式this._init(options);
2. 在vue/src/core/instance/init.js中的initMixin函式定義了vue._init()方法，需要關注的重點是這裡：
Vue.prototype._init = function (options?: Object) {
const vm: Component = this;
......
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm)
initState(vm) //初始化data、props等資料的監聽
initProvide(vm)
callHook(vm, 'created')
......
if (vm.$options.el) {
//渲染頁面
vm.$mount(vm.$options.el)
}
}複製程式碼前半部分程式碼是初始化各種東西，包括生命週期，事件，資料等。後半部分程式碼vm.$mount(vm.$options.el)是用來渲染頁面的。
這裡我們先說最重要的initState(vm)；
3. 在vue/src/core/instance/state.js中：
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options; //opts就是options,即包含了el,data,props等屬性或方法的物件
if (opts.props) initProps(vm, opts.props); //初始化props
if (opts.methods) initMethods(vm, opts.methods); //初始化methods
if (opts.data) {
initData(vm) //初始化data
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
複製程式碼無論是props，data還是computed，屬性繫結的思路都是差不多的，所以我就用data來說明了。
4. 在與initState相同的檔案下，我們可以看到initData方法：
function initData (vm: Component) {
let data = vm.$options.data
//為data和vm._data賦值
data = vm._data = typeof data === 'function'
//如果data是函式，我們就將data的返回值掛載到vm下，賦給data和vm._data
? getData(data, vm)
: data || {}
if (!isPlainObject(data)) {
data = {}
process.env.NODE_ENV !== 'production' && warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
vm
)
}
// proxy data on instance
const keys = Object.keys(data) //keys為data的屬性組成的陣列
const props = vm.$options.props
const methods = vm.$options.methods
let i = keys.length
while (i--) {
//這個迴圈裡是判斷是否出現data的屬性與props，methods重名，否則給出警告
const key = keys[i]
if (process.env.NODE_ENV !== 'production') {
if (methods && hasOwn(methods, key)) {
warn(
`Method "${key}" has already been defined as a data property.`,
vm
)
}
}
if (props && hasOwn(props, key)) {
process.env.NODE_ENV !== 'production' && warn(
`The data property "${key}" is already declared as a prop. ` +
`Use prop default value instead.`,
vm
)
} else if (!isReserved(key)) {
proxy(vm, `_data`, key)
}
}
// observer方法，建立並返回Observer例項，實現繫結的重要函式
observe(data, true /* asRootData */)
}
複製程式碼5. 在vue/src/core/observer/index.js檔案中，可以看到observer函式：
export function observe (value: any, asRootData: ?boolean): Observer | void {
if (!isObject(value) || value instanceof VNode) {
return
}
let ob: Observer | void
//如果傳入的data有__ob__方法，直接複製給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
) {
//否則通過new Observer(value)方法建立一個例項，並賦值給ob
ob = new Observer(value)
}
if (asRootData && ob) {
ob.vmCount++
}
return ob
}
複製程式碼6. 在同檔案下可以看到Observer類的定義：
export class Observer {
value: any;
dep: Dep;
vmCount: number; // number of vms that has this object as root $data
constructor (value: any) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
//為傳入的data物件新增一個__ob__屬性，值為Observer例項本身
def(value, '__ob__', this)
if (Array.isArray(value)) {
const augment = hasProto
? protoAugment
: copyAugment
//如果傳入的data是個陣列，執行augment()方法
augment(value, arrayMethods, arrayKeys)
this.observeArray(value)
} else {
//否則執行walk()方法，事實上大部分情況我們都走walk這個方法
this.walk(value)
}
}
複製程式碼7. 同檔案下有walk函式：
在看程式碼之前我先插一句，這裡傳入的obj已經不是完整的data了，假設我們的data是這樣的：
data(){
return {
a:1,
b:2,
}
}複製程式碼那麼在經歷了initData中的getData後，已經變成了{a:1, b:2};
好的我們接著說walk方法：
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i], obj[keys[i]])
}
}複製程式碼walk()方法遍歷物件的每一個屬性，執行defineReactive()方法，這個方法的作用就是將每個屬性轉化為getter和setter，同時新建一個Dep的例項。
8. 在和walk，Observer同檔案下：
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
//每個屬性偶讀新建一個Dep的例項
const dep = new Dep()
//獲取每個屬性的特性：configurable、enumerable，getter,setter等等.......
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
const getter = property && property.get
const setter = property && property.set
//這裡是遞迴遍歷屬性值，有的屬性的值還是物件，就繼續執行observer
let childOb = !shallow && observe(val)
//重點！！將屬性轉化為getter，setter
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const 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) {
const 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。
在getter時執行了reactiveGetter函式，裡面會判斷Dep.target是否存在，如果存在，則執行dep.depend()方法；而在setter的最後，執行了dep.notify()方法。
三. Dep類
在vue/src/core/observer/dep.js中我們可以看到Dep類的定義：
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>;
constructor () {
this.id = uid++
this.subs = []
}
//將訂閱者新增到this.subs中
addSub (sub: Watcher) {
this.subs.push(sub)
}
removeSub (sub: Watcher) {
remove(this.subs, sub)
}
//defineReactive方法中使用的depend方法
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
//通知訂閱者執行update()函式
notify () {
// stabilize the subscriber list first
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
複製程式碼看到this.subs和notify()相信你已經知道Dep是什麼了吧？沒錯，就如同我前面講的，Dep這個類就是在vue實現資料繫結的過程中，作為訂閱者和釋出者的一個橋樑。通過defineReactive的程式碼我們可以知道，當為屬性賦值觸發setter時會執行dep.notify()，我們可以說set函式執行了釋出者的行為，那訂閱者又是誰呢？Dep.target又是什麼呢？我們繼續往下看。
四. 訂閱者Watcher
我們繼續看dep.js這個檔案，在檔案最後幾行，有如下程式碼：
Dep.target = null
const targetStack = []
export function pushTarget (_target: Watcher) {
if (Dep.target) targetStack.push(Dep.target)
Dep.target = _target
}
export function popTarget () {
Dep.target = targetStack.pop()
}複製程式碼pushTarget()方法就是把傳入的Watcher例項賦給Dep.target，一旦Dep.target有值的話，就可以執行dep.depend()方法了。
我們在vue/src/core/obsever/watcher.js可以看到Watcher類的定義：
export default class Watcher {
.......
constructor (
vm: Component, //vm
expOrFn: string | Function,
cb: Function,
options?: Object
) {
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 // uid for batching
this.active = true
this.dirty = this.lazy // for lazy watchers
this.deps = []
this.newDeps = []
this.depIds = new Set()
this.newDepIds = new Set()
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: ''
// parse expression for getter
//如果Watcher第二個引數是函式，就賦值給this.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
//大部分情況下不會傳options引數，this.lazy值為false,所以執行this.get()方法
: this.get()
}
複製程式碼Watcher下方就有get()方法的定義：
get () {
//先將Watcher例項賦值給Dep.target;
pushTarget(this)
let value
const vm = this.vm
try {
//執行this.getter方法
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
}
複製程式碼get方法先給Dep.Target賦值，接著執行this.getter()方法。那麼什麼時候新建Watcher例項？給Dep.target賦值呢？
在回答這個問題前我先說一下dep.depend方法，裡面執行了Dep.target.addDep(this)，這個方法也可以換成new Watcher.addDep(this)；這裡的this就是new Watcher例項本身
addDep (dep: Dep) {
const id = dep.id
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
//經過一系列判斷，最終將Watcher例項傳給dep.subs中；
dep.addSub(this)
}
}
}
複製程式碼好的，我們接著回到什麼新建Watcher例項的這個問題上，還記得我在Vue.prototype._init方法中提到的$mount渲染頁面的方法嗎？
在vue/src/platforms/web/runtime/index.js中可以看到$mount方法的定義：
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
複製程式碼在vue/src/core/instance/lifecycle.js中可以看到mountComponent的中有這樣幾行程式碼：
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
vm._watcher = new Watcher(vm, updateComponent, noop);
複製程式碼vm._update(vm._render(), hydrating)這段程式碼中vm.render()實際上就是生成了vnode（虛擬dom），vm._update則是根據vnode生成真正的dom，渲染頁面。把這段程式碼賦值給updateComponent，之後建立new Watcher的例項，將updateComponent作為第二個引數傳給this.getter。Watcher例項執行get()方法時給Dep.target賦值，執行updateComponent函式，從而重新整理頁面，獲取data中各個屬性值的時候又會觸發getter，於是將Watcher例項傳給Dep.subs中形成依賴。
最後，我們再來看dep.notify()函式，它會遍歷subs中的每一個元素，執行update()方法：
update () {
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
this.run()
} else {
//在nextTick的時候執行run
queueWatcher(this)
}
}
複製程式碼我們主要看this.run()方法：
run () {
if (this.active) {
const value = this.get()
if (
value !== this.value ||
// Deep watchers and watchers on Object/Arrays should fire even
// when the value is the same, because the value may
// have mutated.
isObject(value) ||
this.deep
) {
// set new value
const oldValue = this.value
this.value = value
if (this.user) {
try {
this.cb.call(this.vm, value, oldValue)
} catch (e) {
handleError(e, this.vm, `callback for watcher "${this.expression}"`)
}
} else {
this.cb.call(this.vm, value, oldValue)
}
}
}
}複製程式碼實際上，run()方法就是執行了get()方法，從而觸發this.getter方法的執行，然後渲染頁面的。這樣，vue資料繫結的整個流程就串下來了——
初始化頁面，獲取data中屬性的同時將訂閱者Watcher傳個Dep中，當data中的屬性有更新的時候，觸發notify方法通知對應的Watcher進行更新，更新後重新渲染頁面，繼續新增依賴......
整個流程就是這樣，如果你還不清楚的話，可以結合文章開頭的圖片，這樣可能會讓你的思路更清晰。