1、initState(vm)——初始化porps, methods, data, computed, watch

1. 地址：src/core/instance/init.js
   初始化porps,methods,data,computed,watch,并注入到vue实例上，并做响应式处理
   2、initData或者observe方法——响应式入口
2. 地址：src/core/instance/state.js
   进入initState方法，对data进入处理——响应式入口
   export function initState (vm: Component) {
   ......
   if (opts.data) {
   // data做响应式处理
   initData(vm)
   } else {
   observe(vm._data = {}, true /* asRootData */)
   }
   ......
   }

3、observe(value)方法——创建Observer()对象

1. 地址：src/core/observer/index.js
   判断value是否是对象，不是直接返回
   判断value是否有ob属性，如果有返回；这样做的好处是，如果之前做过响应式处理就可以直接缓存；没有的话创建Observer对象
   返回Observer对象
   export function observe (value: any, asRootData: ?boolean): Observer | void {
   // 判断value是否是对象
   if (!isObject(value) || value instanceof VNode) {
   return
   }
   let ob: Observer | void
   // 如果value有ob(observer对象)属性结束
   // 这样做的好处是，如果之前做过响应式处理就可以直接缓存
   if (hasOwn(value, 'ob') && value.ob instanceof Observer) {
   ob = value.ob
   } else if (
   shouldObserve &&
   !isServerRendering() &&
   (Array.isArray(value) || isPlainObject(value)) &&
   Object.isExtensible(value) &&
   !value._isVue
   ) {
   // 创建一个Observer对象
   ob = new Observer(value)
   }
   if (asRootData && ob) {
   ob.vmCount++
   }
   return ob
   }

4、Observer类——对象，数组处理入口

1. 地址：src/core/observer/index.js
   每个Observer类都有一个dep对象
   给vaule对象定义ob属性，记录当前的observer对象
   对象的响应式处理，调用walk(value)方法中的defineReactive(obj, keys[i])
   数组的响应式处理，protoAugment(value, arrayMethods)/copyAugment(value, arrayMethods, arrayKeys)
   export class Observer {
   value: any;
   dep: Dep;
   vmCount: number; // number of vms that have this object as root $data

constructor (value: any) {
this.value = value
// 每个Observer类都有一个dep对象
this.dep = new Dep()
this.vmCount = 0
// 将实例挂载到观察对象的ob属性
def(value, 'ob', this)
// 数组响应式处理
if (Array.isArray(value)) {
// 判断当前浏览器对象是否支持proto
// protoAugment，copyAugment，重新修补会改变数组元素的方法
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
} else {
// 遍历对象中的每一个属性，转换成setter/getter
this.walk(value)
}
}

/**

• Walk through all properties 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])
  }
  }

/**

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

5、defineReactive()方法——对象响应式处理

1. 地址： src/core/observer/index.js
   为每个属性创建dep对象，这的dep是为了收集依赖与每个Observer类中的dep不一样
   如果当前的值是对象，调用observe
   defineProperty getter
   收集依赖dep.depend()，如果有子对象，同样给子对象收集依赖
   返回属性的值 return value
   defineProperty setter
   保存新值
   如果新值是对象，深度监听，并返回子的observe(newVal)
   派发更新（发送更新通知）dep.notify()
   export function defineReactive (
   obj: Object,
   key: string,
   val: any,
   // 用户自定义函数，很少用到
   customSetter?: ?Function,
   // 是否深度监听
   shallow?: boolean
   ) {
   // 依赖对象实例
   const dep = new Dep()
   // 获取obj的属性描述对象，为obj定义getter,setter,configurable
   const property = Object.getOwnPropertyDescriptor(obj, key)
   // 属性不可配置，也就是不能重新用defineProperty来定义，直接返回
   if (property && property.configurable === false) {
   return
   }

// cater for pre-defined getter/setters
// 有可能用户有些get,set，这样就先取出来，然后重新加入派发和更新
const getter = property && property.get
const setter = property && property.set
// defineReactive只传入两个值的时候，获取到val值
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]
}

// 判断是否是深度监听，并将子对象属性转化为getter/setter,返回子观察对象
let childOb = !shallow && observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
// 先获取用户传入的getter，如果有则使用用户定义的getter，没有的话就刚才设置的val值
const value = getter ? getter.call(obj) : val
// 收集依赖
// 将依赖改属性的watcher对象添加到dep,将来数据发生变化时通知
// target中存储的是watcher对象
if (Dep.target) {
// depend()方法是进行依赖收集，将watcher对象添加到subs数组中
dep.depend()
if (childOb) {
// 给子对象添加依赖
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {
// 先获取用户传入的getter，如果有则使用用户定义的getter，没有的话就刚才设置的val值
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare /
// 判断新值与旧值是否相同，如果新值或旧值为NaN则不执行
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/ eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
// #7981: for accessor properties without setter
// 如果getter存在，setter不存在，只读，直接返回
if (getter && !setter) return
// setter存在，则调用，否则直接更新数值
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
// 新值是对象，深度监听，并返回子的observer对象
childOb = !shallow && observe(newVal)
// 派发更新（发布更新通知）
dep.notify()
}
})
}

6、if(Dep.target){dep.depend()...}——收集依赖

1. 将watcher对象记录到Dep.target中
2. 地址：src/core/observer/index.js
   Dep.target，target中存储的是watcher对象，找到watcher定义的地方，查看什么时候给Dep.target赋值
3. 地址： src/core/instance/lifecycle.js
   new Watcher(vm,undateComponent,...)进入watcher对象
4. 地址： src/core/observer/watcher.js
   Watcher类中，定义了很多属性，将定义的watcher对象this，存储到vue实例的watchers数组中
   // 渲染watcher，侦听器watcher，计算属性watcher都会记录到_watcher中
   // 将定义的watcher对象this，存储到vue实例的watchers数组中
   vm._watchers.push(this)

调用get方法中的pushTarget(this)，this也就是当前的watcher，记录当前watcher，进入pushTarget
watcher的get方法，每次访问属性时都会执行，首次渲染会执行，数据改变也会执行，也就是当我们访问时会收集依赖
访问data中的成员的时候收集依赖，触发defineReactive的getter时收集依赖
// this也就是将当前的watcher对象记录下来
get () {
pushTarget(this)
......
}

4. 地址：src/core/observer/dep.js
   入栈并将当前的watcher赋值记录Dep.target中
   // 当前target用来存放目前正在使用的watcher
   // 全局唯一，并且一次也只能又一个watcher被使用
   Dep.target = null
   const targetStack = []
   // 入栈并将当前watcher赋值给Dep.target
   // vue2后每个组件对应一个watcher对象，组件有嵌套，B是A的子组件，渲染A时，先渲染B组件，
   // A渲染过程被挂载起来，A的watcher先存储到栈中，B渲染完，把父组件watcher出栈，然后父组件渲染
   export function pushTarget (target: ?Watcher) {
   targetStack.push(target)
   Dep.target = target
   }

5. dep.depend()——将watcher对象添加到dep对象的subs数组中

6. 回到地址：src/core/observer/index.js
   进入depend()方法

7. 地址： src/core/observer/dep.js
   depend()方法将dep对象添加到watcher的依赖中，addDep(this)

8. 地址：src/core/observer/watcher.js
   主要是将watcher对象添加到了subs数组中，dep.addSub(this),添加到subs数组中
   // 主要是watcher对象添加到了subs数组中
   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)) {
   dep.addSub(this)
   }
   }
   }

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

3. 存在子对象的话，给子对象也添加依赖，目的是子对象添加和删除成员时发送通知
   if (childOb) {
   // 给子对象添加依赖
   childOb.dep.depend()
   if (Array.isArray(value)) {
   dependArray(value)
   }
   }

7、protoAugment(value, arrayMethods)——数组的响应式处理

1. 地址： src/core/observer/index.js
   protoAugment(value, arrayMethods)，copyAugment，arrayMethods重新修补会改变数组元素的方法
2. 地址：src/core/observer/array.js
   对数组，push,pop,shigt,unshift,splice,sort,reverse，这些方法会改变原数组，进行修补变成响应式，先找到数组对象的ob，然后再找到dep，调用notify()发送通知
   const arrayProto = Array.prototype
   // 使用数组原型创建一个新的对象
   export const arrayMethods = Object.create(arrayProto)
   // 修改数组元素的方法
   const methodsToPatch = [
   'push',
   'pop',
   'shift',
   'unshift',
   'splice',
   'sort',
   'reverse'
   ]

/**

• Intercept mutating methods and emit events
  */
  // 将数组方法循环
  methodsToPatch.forEach(function (method) {
  // cache original method
  // 将原数组的方法赋值给original
  const original = arrayProto[method]
  // 调用object,defineProperty()重新定义修改数组的方法
  def(arrayMethods, method, function mutator (...args) {
  // 执行数组的原始方法
  const result = original.apply(this, args)
  // 获取数组对象的ob对象
  const ob = this.ob
  // 存储数组中新增的元素
  let inserted
  switch (method) {
  case 'push':
  case 'unshift':
  inserted = args
  break
  case 'splice':
  inserted = args.slice(2)
  break
  }
  // 对插入的新元素，重新遍历数组元素设置为响应式数据
  if (inserted) ob.observeArray(inserted)
  // notify change
  // 调用了修改数组的方法，调用数组的ob对象发送通知
  ob.dep.notify()
  return result
  })
  })

8、watcher——dep.notify()调用watcher中的update()方法发布更新通知

1. 地址： src/core/observer/index.js 与 src/core/observer/dep.js
   dep.notify() 派发更新，调用watcher中的update()方法
   notify () {
   // stabilize the subscriber list first
   const subs = this.subs.slice()
   if (process.env.NODE_ENV !== 'production' && !config.async) {
   // subs aren't sorted in scheduler if not running async
   // we need to sort them now to make sure they fire in correct
   // order
   // 排序，按照watcher的创建顺序
   subs.sort((a, b) => a.id - b.id)
   }
   for (let i = 0, l = subs.length; i < l; i++) {
   // 更新
   subs[i].update()
   }
   }

2. 地址：src/core/observer/dep.js
   update()方法中执行渲染watcher,queueWatcher(this)
   update () {
   /* istanbul ignore else */
   if (this.lazy) {
   this.dirty = true
   } else if (this.sync) {
   this.run()
   } else {
   // 渲染watcher执行
   queueWatcher(this)
   }
   }

3. 地址： src/core/observer/scheduler.js
   queueWatcher()，判断watcher现在是否正在处理，如果没有放入queue队列末尾，并触发flushSchedulerQueue()
   export function queueWatcher (watcher: Watcher) {
   ......
   // flushing正在处理，如果没有正在处理，就将watcher放到队列的末尾
   if (!flushing) {
   queue.push(watcher)
   } else {
   ......
   }
   // queue the flush
   if (!waiting) {
   waiting = true
   ......
   // 触发flushSchedulerQueue
   nextTick(flushSchedulerQueue)
   }
   }
   }

4. 地址：src/core/observer/scheduler.js
   触发beforeUpdate()钩子函数
   调用run方法，run()->get()->触发getter(渲染watcher实际调用updateComponent位置)->updateComponent
   updateComponent会执行vm._update(vm._render())
   watcher.run()方法执行后可以在页面中看到真正的数据，这时候已经处理完成，剩下一些清理工作
   // 调用run方法,watcher.run()后就可以在页面中看到真正的数据
   watcher.run()

const value = this.get()

// 渲染watcher实际调用updateComponent位置
value = this.getter.call(vm, vm)

清空上一次的依赖
触发activated钩子函数
触发updated钩子函数
// 触发beforeUpadate
if (watcher.before) {
watcher.before()
}
......
// 调用run方法,watcher.run()后就可以在页面中看到真正的数据
watcher.run()
......
// 清空上一次的依赖
resetSchedulerState()

// 触发activated钩子函数
callActivatedHooks(activatedQueue)
// 触发updated钩子函数
callUpdatedHooks(updatedQueue)