/// JQuery
<div id="app"></div>
<script>
 $('#app').text('lxb')
</script>

<template>
	<div id="app">{{ message }}</div>
  <button @click="change">點(diǎn)擊修改message</button>
</template>
<script>
export default {
	data () {
  	return {
    	message: 'lxb'
    }
  },
  methods: {
  	change () {
    	this.message = 'lxb1' // 觸發(fā)視圖更新
    }
	}
}
</script>

// _init方法中
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm) // 重點(diǎn)分析
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')

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
 } else {
  observe(vm._data = {}, true /* asRootData */)
 }
 if (opts.computed) initComputed(vm, opts.computed) // 初始化computed
 if (opts.watch && opts.watch !== nativeWatch) { // 初始化watch
  initWatch(vm, opts.watch)
 }
}

function initData (vm: Component) {
 let data = vm.$options.data
 data = vm._data = typeof data === 'function' // 把data掛載到了vm._data上
  ? getData(data, vm) // 執(zhí)行 data.call(vm)
  : data || {}
 if (!isPlainObject(data)) {
  data = {} // 這也是為什么 data函數(shù)需要返回一個(gè)object不然就會(huì)報(bào)這個(gè)警告
  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) // 取到data中所有的key值所組成的數(shù)組
 const props = vm.$options.props
 const methods = vm.$options.methods
 let i = keys.length
 while (i--) {
  const key = keys[i]
  if (process.env.NODE_ENV !== 'production') {
   if (methods && hasOwn(methods, key)) { // 避免方法名與data的key重復(fù)
    warn(
     `Method "${key}" has already been defined as a data property.`,
     vm
    )
   }
  }
  if (props && hasOwn(props, key)) { // 避免props的key與data的key重復(fù)
   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) // 代理
  }
 }
 // observe data
 observe(data, true /* asRootData */) // 響應(yīng)式處理
}

const sharedPropertyDefinition = {
 enumerable: true,
 configurable: true,
 get: noop,
 set: noop
}
export function proxy (target: Object, sourceKey: string, key: string) {
 sharedPropertyDefinition.get = function proxyGetter () {
  return this[sourceKey][key]
 }
 sharedPropertyDefinition.set = function proxySetter (val) {
  this[sourceKey][key] = val
 }
 Object.defineProperty(target, key, sharedPropertyDefinition)
}

export function observe (value: any, asRootData: ?boolean): Observer | void {
 if (!isObject(value) || value instanceof VNode) { // 判斷是否是對(duì)象或者是VNode
  return
 }
 let ob: Observer | void
 // 是否擁有__ob__屬性 有的話證明已經(jīng)監(jiān)聽過(guò)了，直接返回該屬性
 if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
  ob = value.__ob__
 } else if (
  shouldObserve && // 能否被觀察
  !isServerRendering() && // 是否是服務(wù)端渲染
  (Array.isArray(value) || isPlainObject(value)) && // 是否是數(shù)組、對(duì)象、能否被擴(kuò)展、是否是Vue函數(shù)
  Object.isExtensible(value) &&
  !value._isVue 
 ) {
  ob = new Observer(value) // 對(duì)value進(jìn)行觀察
 }
 if (asRootData && ob) {
  ob.vmCount++
 }
 return ob
}

export class Observer {
 value: any; // 觀察的數(shù)據(jù)
 dep: Dep; // dep實(shí)例用于 派發(fā)更新
 vmCount: number; // number of vms that have this object as root $data
 constructor (value: any) {
  this.value = value
  this.dep = new Dep()
  this.vmCount = 0
  // 把__ob__變成不可枚舉的，因?yàn)闆](méi)有必要改變watcher本身
  def(value, '__ob__', this) 會(huì)執(zhí)行 value._ob_ = this(watcher實(shí)例)操作
  if (Array.isArray(value)) { // 當(dāng)value是數(shù)組
   if (hasProto) {
    protoAugment(value, arrayMethods) // 重寫Array.prototype的相關(guān)方法
   } else {
    copyAugment(value, arrayMethods, arrayKeys) // 重寫Array.prototype的相關(guān)方法
   }
   this.observeArray(value)
  } else {
   this.walk(value) // 當(dāng)value為對(duì)象
  }
 }

 /**
  * 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]) // 對(duì)數(shù)據(jù)進(jìn)行響應(yīng)式處理
  }
 }

 /**
  * Observe a list of Array items.
  */
 observeArray (items: Array<any>) {
  for (let i = 0, l = items.length; i < l; i++) {
   observe(items[i]) // 遍歷value數(shù)組的每一項(xiàng)并調(diào)用observe函數(shù)，進(jìn)行響應(yīng)式處理
  }
 }
}

export function defineReactive (
 obj: Object, // data數(shù)據(jù) 
 key: string, // data中對(duì)應(yīng)的key值
 val: any, // 給data[key] 賦值 可選
 customSetter?: ?Function, // 自定義setter 可選
 shallow?: boolean // 是否對(duì)data[key]為對(duì)象的值進(jìn)行observe遞歸 可選
) {
 const dep = new Dep() // Dep實(shí)例 **每一個(gè)key對(duì)應(yīng)一個(gè)Dep實(shí)例**

 const property = Object.getOwnPropertyDescriptor(obj, key) // 拿到對(duì)象的屬性描述
 if (property && property.configurable === false) { // 判斷對(duì)象是否可配置
  return
 }

 // cater for pre-defined getter/setters
 const getter = property && property.get
 const setter = property && property.set
 if ((!getter || setter) && arguments.length === 2) { // 沒(méi)有g(shù)etter或者有setter，并且傳入的參數(shù)有兩個(gè)
  val = obj[key] 
 }

 let childOb = !shallow && observe(val) // 根據(jù)shallow，遞歸遍歷val對(duì)象，相當(dāng)于val當(dāng)做data傳入
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
   const value = getter ? getter.call(obj) : val
   if (Dep.target) { // 當(dāng)前的全部的Watcher實(shí)例
    dep.depend() // 把當(dāng)前的Dep.target加入到dep.subs數(shù)組中
    if (childOb) { // 如果val是對(duì)象，
     childOb.dep.depend() // 會(huì)在value._ob_的dep.subs數(shù)組中加入Dep.target, 忘記ob實(shí)例屬性的同學(xué)可往回翻一番
     if (Array.isArray(value)) {
      dependArray(value) // 定義如下，邏輯也比較簡(jiǎn)單
     }
    }
   }
   return value
  },
  set: function reactiveSetter (newVal) {
   // ....
  }
 })
}

function dependArray (value: Array<any>) {
 for (let e, i = 0, l = value.length; i < l; i++) {
  e = value[i]
  e && e.__ob__ && e.__ob__.dep.depend() // 如果e是響應(yīng)式數(shù)據(jù)，則往e._ob_.dep.subs數(shù)組中加入Dep.target
  if (Array.isArray(e)) {
   dependArray(e) // 遞歸遍歷
  }
 }
}

let uid = 0
/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 */
export default class Dep {
 static target: ?Watcher;
 id: number;
 subs: Array<Watcher>; 

 constructor () {
  this.id = uid++ // 每一個(gè)dep都有一個(gè)唯一的ID
  this.subs = [] // 存放watcher實(shí)例的數(shù)組
 }

 addSub (sub: Watcher) {
  this.subs.push(sub) // 往this.subs加入watcher
 }

 removeSub (sub: Watcher) {
  remove(this.subs, sub) // 刪除this.subs對(duì)應(yīng)的watcher
 }

 depend () {
  if (Dep.target) {
   // watcher.addDep(this) actually
   Dep.target.addDep(this) // 在watcher類中查看
  }
 }

 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
   subs.sort((a, b) => a.id - b.id) // 根據(jù)watcher的id進(jìn)行排序
  }
  for (let i = 0, l = subs.length; i < l; i++) {
   subs[i].update() // 遍歷subs數(shù)組中的每一個(gè)watcher執(zhí)行update方法
  }
 }
}

// The current target watcher being evaluated.
// This is globally unique because only one watcher
// can be evaluated at a time.
Dep.target = null // Dep.target 代表當(dāng)前全局的watcher
const targetStack = []

export function pushTarget (target: ?Watcher) {
 targetStack.push(target)
 Dep.target = target // 賦值
}

export function popTarget () {
 targetStack.pop()
 Dep.target = targetStack[targetStack.length - 1] // 賦值
}

Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
   const value = getter ? getter.call(obj) : val
   if (Dep.target) { // 當(dāng)前的全部的Watcher實(shí)例
    dep.depend() // 把當(dāng)前的Dep.target加入到dep.subs數(shù)組中
    // ..
   }
   return value
  },

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)) {
     dep.addSub(this) // 會(huì)把watcher插入到dep.subs數(shù)組中
    }
   }
 }
}

class Wachter {
	get () {
   pushTarget(this) // Dep.target = this
   let value
   const vm = this.vm
   try {
    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
  }
}

{{ message }} // 會(huì)讀取vm._data.message, 觸發(fā)getters函數(shù)

export function defineReactive (
 obj: Object,
 key: string,
 val: any,
 customSetter?: ?Function,
 shallow?: boolean
) {
 const dep = new Dep()
	// ..
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
   // ..
  },
  set: function reactiveSetter (newVal) {
   /* 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()
   }
   // #7981: for accessor properties without setter
   if (getter && !setter) return
   if (setter) {
    setter.call(obj, newVal)https://cn.vuejs.org//images/data.png
   } else {
    val = newVal
   }
   childOb = !shallow && observe(newVal)
   dep.notify() // 遍歷dep.subs數(shù)組，取出所有的wathcer執(zhí)行update操作
  }
 })
}