export function initState (vm: Component) {
 vm._watchers = []
 const opts = vm.$options
 if (opts.props) initProps(vm, opts.props) // 初始化props
 if (opts.methods) initMethods(vm, opts.methods) // 初始化方法
 if (opts.data) {
 initData(vm) // 先初始化data 重點(diǎn)
 } else {
 observe(vm._data = {}, true /* asRootData */)
 }
 if (opts.computed) initComputed(vm, opts.computed) // 初始化computed
 if (opts.watch && opts.watch !== nativeWatch) {
 initWatch(vm, opts.watch) // 初始化watch
 }
}

function initWatch (vm: Component, watch: Object) {
 for (const key in watch) {
 const handler = watch[key]
 if (Array.isArray(handler)) { // 如果handler是一個(gè)數(shù)組
  for (let i = 0; i < handler.length; i++) { // 遍歷watch的每一項(xiàng)，執(zhí)行createWatcher
  createWatcher(vm, key, handler[i])
  }
 } else {
  createWatcher(vm, key, handler) 
 }
 }
}

function createWatcher (
 vm: Component,
 expOrFn: string | Function,
 handler: any,
 options?: Object
) {
 if (isPlainObject(handler)) { // 判斷handler是否是純對(duì)象,對(duì)options和handler重新賦值
 options = handler
 handler = handler.handler
 }
 if (typeof handler === 'string') { // handler用的是methods上面的方法，具體用法請(qǐng)查看官網(wǎng)文檔
 handler = vm[handler]
 }
 // expOrnFn: watch的key值， handler: 回調(diào)函數(shù) options: 可選配置
 return vm.$watch(expOrFn, handler, options) // 調(diào)用原型上的$watch
}

 Vue.prototype.$watch = function (
 expOrFn: string | Function,
 cb: any,
 options?: Object
 ): Function {
 const vm: Component = this
 if (isPlainObject(cb)) { // 判斷cb是否是對(duì)象，如果是則繼續(xù)調(diào)用createWatcher
  return createWatcher(vm, expOrFn, cb, options)
 }
 options = options || {}
 options.user = true // user Watcher的標(biāo)示 options = { user: true， ...options }
 const watcher = new Watcher(vm, expOrFn, cb, options) // new Watcher 生成一個(gè)user Watcher
 if (options.immediate) { // 如果傳入了immediate 則直接執(zhí)行回調(diào)cb
  try {
  cb.call(vm, watcher.value)
  } catch (error) {
  handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
  }
 }
 return function unwatchFn () {
  watcher.teardown()
 }
 }
}

export default class Watcher {
 vm: Component;
 expression: string;
 cb: Function;
 id: number;
 deep: boolean;
 user: boolean;
 lazy: boolean;
 sync: boolean;
 dirty: boolean;
 active: boolean;
 deps: Array<Dep>;
 newDeps: Array<Dep>;
 depIds: SimpleSet;
 newDepIds: SimpleSet;
 before: ?Function;
 getter: Function;
 value: any;

 constructor (
 vm: Component,
 expOrFn: string | Function,
 cb: Function,
 options?: ?Object,
 isRenderWatcher?: boolean
 ) {
 this.vm = vm
 if (isRenderWatcher) {
  vm._watcher = this
 }
 vm._watchers.push(this)
 // options
 if (options) { // 在 new UserWatcher的時(shí)候傳入了options，并且options.user = true
  this.deep = !!options.deep
  this.user = !!options.user
  this.lazy = !!options.lazy
  this.sync = !!options.sync
  this.before = options.before
 } 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' // 一個(gè)函數(shù)表達(dá)式
  ? expOrFn.toString()
  : ''
 // parse expression for getter
 if (typeof expOrFn === 'function') { 
  this.getter = expOrFn
 } else {
  this.getter = parsePath(expOrFn) // 進(jìn)入這個(gè)邏輯,調(diào)用parsePath方法，對(duì)getter進(jìn)行賦值
  if (!this.getter) {
  this.getter = noop
  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()
 }
}

/**
 * Parse simple path.
 */
const bailRE = new RegExp(`[^${unicodeRegExp.source}.$_\\d]`)
export function parsePath (path: string): any {
 if (bailRE.test(path)) {
 return
 }
 const segments = path.split('.')
 return function (obj) {
 for (let i = 0; i < segments.length; i++) { // 遍歷數(shù)組
  if (!obj) return
  obj = obj[segments[i]] // 每次把當(dāng)前的key值對(duì)應(yīng)的值重新賦值obj
 }
 return obj
 }
}

watch: {
	a: () {}
 'formData.a': () {}
}

constructor () { // 初始化的最后一段邏輯
	this.value = this.lazy // 因?yàn)閠his.lazy為false，所以會(huì)執(zhí)行this.get方法
  ? undefined
  : this.get()
}
  
get () {
 pushTarget(this) // 將當(dāng)前的watcher實(shí)例賦值給 Dep.target
 let value
 const vm = this.vm
 try {
  value = this.getter.call(vm, vm) // 這里的getter就是上文所講parsePath放回的函數(shù)，并將vm實(shí)例當(dāng)做第一個(gè)參數(shù)傳入
 } catch (e) {
  if (this.user) {
  handleError(e, vm, `getter for watcher "${this.expression}"`) // 如果報(bào)錯(cuò)了會(huì)這這一塊邏輯
  } else {
  throw e
  }
 } finally {
  // "touch" every property so they are all tracked as
  // dependencies for deep watching
  if (this.deep) { // 如果deep為true，則執(zhí)行深遞歸
  traverse(value)
  }
  popTarget() // 將當(dāng)前watch出棧
  this.cleanupDeps() // 清空依賴收集 這個(gè)過(guò)程也是尤為重要的，后續(xù)我會(huì)單獨(dú)寫一篇文章分析。
 }
 return value
 }

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
 },
}

class Watcher {
 constructor () {} //..
 run () {
 if (this.active) { // 用于標(biāo)示watcher實(shí)例有沒(méi)有注銷
  const value = this.get() // 執(zhí)行g(shù)et方法
  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) { // UserWatcher
   try {
   this.cb.call(this.vm, value, oldValue) // 執(zhí)行回調(diào)cb，并傳入新值和舊值作為參數(shù)
   } catch (e) {
   handleError(e, this.vm, `callback for watcher "${this.expression}"`)
   }
  } else {
   this.cb.call(this.vm, value, oldValue)
  }
  }
 }
 }
}

const computedWatcherOptions = { lazy: true }

function initComputed (vm: Component, computed: Object) {
 // $flow-disable-line
 const watchers = vm._computedWatchers = Object.create(null) // 用來(lái)存放computedWatcher的map
 // computed properties are just getters during SSR
 const isSSR = isServerRendering()

 for (const key in computed) {
 const userDef = computed[key]
 const getter = typeof userDef === 'function' ? userDef : userDef.get
 if (process.env.NODE_ENV !== 'production' && getter == null) {
  warn(
  `Getter is missing for computed property "${key}".`,
  vm
  )
 }

 if (!isSSR) { // 不是服務(wù)端渲染
  // create internal watcher for the computed property.
  watchers[key] = new Watcher( // 執(zhí)行new Watcher
  vm,
  getter || noop,
  noop,
  computedWatcherOptions { lazy: true }
  )
 }

 // component-defined computed properties are already defined on the
 // component prototype. We only need to define computed properties defined
 // at instantiation here.
 if (!(key in vm)) { 
 // 會(huì)在vm的原型上去查找computed對(duì)應(yīng)的key值存不存在，如果不存在則執(zhí)行defineComputed，存在的話則退出，
 // 這個(gè)地方其實(shí)是Vue精心設(shè)計(jì)的
 // 比如說(shuō)一個(gè)組件在好幾個(gè)文件中都引用了，如果不將computed
  defineComputed(vm, key, userDef)
 } else if (process.env.NODE_ENV !== 'production') {
  if (key in vm.$data) {
  warn(`The computed property "${key}" is already defined in data.`, vm)
  } else if (vm.$options.props && key in vm.$options.props) {
  warn(`The computed property "${key}" is already defined as a prop.`, vm)
  }
 }
 }
}

export function defineComputed (
 target: any,
 key: string,
 userDef: Object | Function
) {
 const shouldCache = !isServerRendering()
 if (typeof userDef === 'function') { // 分支1
 sharedPropertyDefinition.get = shouldCache
  ? createComputedGetter(key)
  : createGetterInvoker(userDef)
 sharedPropertyDefinition.set = noop
 } else {
 sharedPropertyDefinition.get = userDef.get
  ? shouldCache && userDef.cache !== false
  ? createComputedGetter(key)
  : createGetterInvoker(userDef.get)
  : noop
 sharedPropertyDefinition.set = userDef.set || noop
 }
 if (process.env.NODE_ENV !== 'production' &&
  sharedPropertyDefinition.set === noop) {
 sharedPropertyDefinition.set = function () {
  warn(
  `Computed property "${key}" was assigned to but it has no setter.`,
  this
  )
 }
 }
 Object.defineProperty(target, key, sharedPropertyDefinition)
}

function createComputedGetter (key) {
 return function computedGetter () {
 const watcher = this._computedWatchers && this._computedWatchers[key] // 就是上文中new Watcher()
 if (watcher) {
  if (watcher.dirty) {
  watcher.evaluate()
  }
  if (Dep.target) {
  watcher.depend()
  }
  return watcher.value
 }
 }
}

<template>
	<div>{{ message }}</div>
</template>
export default {
	data () {
 	return {
  	a: 1,
   b: 2
  }
 },
 computed: {
 	message () { // 這里的函數(shù)名message就是所謂的key
  	return this.a + this.b
  }
 }
}

const watcher = this._computedWatchers && this._computedWatchers[key]

 if (!isSSR) { // 不是服務(wù)端渲染
  // create internal watcher for the computed property.
  watchers[key] = new Watcher( // 執(zhí)行new Watcher
  vm,
  getter || noop,
  noop,
  computedWatcherOptions { lazy: true }
  )
 }

export default class Watcher {
 vm: Component;
 expression: string;
 cb: Function;
 id: number;
 deep: boolean;
 user: boolean;
 lazy: boolean;
 sync: boolean;
 dirty: boolean;
 active: boolean;
 deps: Array<Dep>;
 newDeps: Array<Dep>;
 depIds: SimpleSet;
 newDepIds: SimpleSet;
 before: ?Function;
 getter: Function;
 value: any;

 constructor (
 vm: Component,
 expOrFn: string | Function,
 cb: Function,
 options?: ?Object,
 isRenderWatcher?: boolean
 ) {
 this.vm = vm
 if (isRenderWatcher) {
  vm._watcher = this
 }
 vm._watchers.push(this)
 // options
 if (options) {
  this.deep = !!options.deep
  this.user = !!options.user
  this.lazy = !!options.lazy // lazy = true
  this.sync = !!options.sync
  this.before = options.before
 } 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.dirty = true 這里把this.dirty設(shè)置為true
 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
 if (typeof expOrFn === 'function') { // 走到這一步
  this.getter = expOrFn
 } else {
  // ..
 }
 this.value = this.lazy // 一開始不執(zhí)行this.get()函數(shù) 直接返回undefined
  ? undefined
  : this.get()
 }

if (watcher) {
 if (watcher.dirty) {
 watcher.evaluate()
 }
 if (Dep.target) {
 watcher.depend()
 }
 return watcher.value
}

evaluate () {
 this.value = this.get() // 這里的get() 就是vm['message'] 返回就是this.a + this.b的和
 this.dirty = false // 將dirty置為false
}

depend () {
 let i = this.deps.length 
 while (i--) {
 this.deps[i].depend()
 }
}

update () {
 /* istanbul ignore else */
 if (this.lazy) {
 this.dirty = true
 } else if (this.sync) {
 this.run()
 } else {
 queueWatcher(this)
 }
}