vue中的数据绑定原理的实现

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

// src/core/instance/init.jsVue.prototype._init = function (options?: Object) { ... initLifecycle(vm) initEvents(vm) callHook(vm, 'beforeCreate') initState(vm) callHook(vm, 'created') initRender(vm)}

// src/core/instance/state.jsexport function initState (vm: Component) { vm._watchers = [] initProps(vm) initData(vm) initComputed(vm) initMethods(vm) initWatch(vm)}

// src/core/instance/state.jsfunction 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.jsexport 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.jsexport 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.jsexport 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.jsexport 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.jsexport 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)   }  } }...}