vue中的數據綁定原理的實現

src
|---core
| |---instance
| |---init.js
| |---state.js
| |---observer
| |---dep.js
| |---watcher.js

// src/core/instance/init.js

Vue.prototype._init = function (options?: Object) {
 ...
 initLifecycle(vm)
 initEvents(vm)
 callHook(vm, 'beforeCreate')
 initState(vm)
 callHook(vm, 'created')
 initRender(vm)
}

// src/core/instance/state.js

export function initState (vm: Component) {
 vm._watchers = []
 initProps(vm)
 initData(vm)
 initComputed(vm)
 initMethods(vm)
 initWatch(vm)
}

// src/core/instance/state.js

function initData (vm: Component) {
 let data = vm.$options.data
 data = vm._data = typeof data === 'function'
 ? data.call(vm)
 : data || {}
 if (!isPlainObject(data)) {
 data = {}
 process.env.NODE_ENV !== 'production' && warn(
 'data functions should return an object.',
 vm
 )
 }
 // proxy data on instance
 const keys = Object.keys(data)
 const props = vm.$options.props
 let i = keys.length
 while (i--) {
 if (props && hasOwn(props, keys[i])) {
 process.env.NODE_ENV !== 'production' && warn(
 `The data property "${keys[i]}" is already declared as a prop. ` +
 `Use prop default value instead.`,
 vm
 )
 } else {
 proxy(vm, keys[i])
 }
 }
 // observe data
 observe(data)
 data.__ob__ && data.__ob__.vmCount++
}

// src/core/observer/index.js

export function observe (value: any): Observer | void {
 if (!isObject(value)) {
 return
 }
 let ob: Observer | void
 if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
 ob = value.__ob__
 } else if (
 observerState.shouldConvert &&
 !config._isServer &&
 (Array.isArray(value) || isPlainObject(value)) &&
 Object.isExtensible(value) &&
 !value._isVue
 ) {
 ob = new Observer(value)
 }
 return ob
}

// src/core/observer/index.js

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
 def(value, '__ob__', this)
 if (Array.isArray(value)) {
 const augment = hasProto
 ? protoAugment
 : copyAugment
 augment(value, arrayMethods, arrayKeys)
 this.observeArray(value)
 } else {
 this.walk(value)
 }
 }

 /**
 * Walk through each property and convert them into
 * getter/setters. This method should only be called when
 * value type is Object.
 */
 walk (obj: Object) {
 const keys = Object.keys(obj)
 for (let i = 0; i < keys.length; i++) {
 defineReactive(obj, keys[i], obj[keys[i]])
 }
 }

 /**
 * Observe a list of Array items.
 */
 observeArray (items: Array<any>) {
 for (let i = 0, l = items.length; i < l; i++) {
 observe(items[i])
 }
 }
}

// src/core/observer/index.js

export function defineReactive (
 obj: Object,
 key: string,
 val: any,
 customSetter?: Function
) {
 const dep = new Dep()
// data中的每一個成員都有一個對應的Dep，在此閉包創建。

 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

 let childOb = observe(val)
 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)) {
 for (let e, i = 0, l = value.length; i < l; i++) {
 e = value[i]
 e && e.__ob__ && e.__ob__.dep.depend()
 }
 }
 }
 return value
 },
 set: function reactiveSetter (newVal) {
 const value = getter ? getter.call(obj) : val
 if (newVal === value) {
 return
 }
 if (process.env.NODE_ENV !== 'production' && customSetter) {
 customSetter()
 }
 if (setter) {
 setter.call(obj, newVal)
 } else {
 val = newVal
 }
 childOb = observe(newVal)
 dep.notify() // 發布通知
 }
 })
}

// src/core/observer/dep.js

export default class Dep {
 static target: ?Watcher;
 id: number;
 subs: Array<Watcher>;

 constructor () {
 this.id = uid++
 this.subs = []
 }

 addSub (sub: Watcher) {
 this.subs.push(sub)
 }

 removeSub (sub: Watcher) {
 remove(this.subs, sub)
 }

 depend () {
 if (Dep.target) {
// 調用當前target，也就是正在處理的watcher的addDep方法，并把此Dep傳進去
 Dep.target.addDep(this)
 }
 }

 notify () {
 // stablize the subscriber list first
 const subs = this.subs.slice()
 for (let i = 0, l = subs.length; i < l; i++) {
 subs[i].update()
 }
 }
}

// src/core/observer/watcher.js

export default class 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中
 dep.addSub(this)
 }
 }
 }
...
}