详解Vue源码学习之双向绑定

function initdata(vm) { //将data上数据复制到_data并遍历所有属性添加代理
 vm._data = vm.$options.data;
 const keys = object.keys(vm._data); 
 let i = keys.length;
 while(i--) { 
  const key = keys[i];
  proxy(vm, `_data`, key);
 }
 observe(data, true /* asrootdata */) //对data进行监听
}

export function observe (value) {
 //递归子属性时的判断
 if (!isobject(value) || value instanceof vnode) {
  return
 }
 ...
 ob = new observer(value)
}
export class observer {
 constructor (value) {
  ... //此处省略对数组的处理
  this.walk(value)
 }

 walk (obj: object) {
  const keys = object.keys(obj)
  for (let i = 0; i < keys.length; i++) {
   definereactive(obj, keys[i]) //为每个属性创建setter/getter
  }
 }
 ...
}

//设置set/get
export function definereactive (
 obj: object,
 key: string,
 val: any
) {
 //利用闭包存储每个属性关联的watcher队列，当setter触发时依然能访问到
 const dep = new dep()
 ...
 //如果属性为对象也创建相应observer
 let childob = observe(val)
 object.defineproperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactivegetter () {
   if (dep.target) {
    dep.depend() //将当前dep传到对应watcher中再执行watcher.adddep将watcher添加到当前dep.subs中
    if (childob) { //如果属性是对象则继续收集依赖
     childob.dep.depend()
     ...
    }
   }
   return value
  },
  set: function reactivesetter (newval) {
   ...
   childob = observe(newval) //如果设置的新值是对象，则为其创建observe
   dep.notify() //通知队列中的watcher进行更新
  }
 })
}

export default class dep {
 static target: ?watcher; //指向当前watcher
 constructor () {
  this.subs = []
 }
 //添加watcher
 addsub (sub: watcher) {
  this.subs.push(sub)
 }
 //移除watcher
 removesub (sub: watcher) {
  remove(this.subs, sub)
 }
 //通过watcher将自身添加到dep中
 depend () {
  if (dep.target) {
   dep.target.adddep(this)
  }
 }
 //派发更新信息
 notify () {
  ...
  for (let i = 0, l = subs.length; i < l; i++) {
   subs[i].update()
  }
 }
}

//解析表达式（a.b）,返回一个函数
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++) {
   if (!obj) return
   obj = obj[segments[i]]  //遍历得到表达式所代表的属性
  }
  return obj
 }
}
export default class watcher {
 constructor (
  vm: component,
  exporfn: string | function,
  cb: function,
  options?: ?object,
  isrenderwatcher?: boolean
 ) {
  this.vm = vm
  if (isrenderwatcher) {
   vm._watcher = this
  } 
  //对创建的watcher进行收集，destroy时对这些watcher进行销毁
  vm._watchers.push(this)
  // options
  if (options) {
   ...
   this.before = options.before
  }
  ...
  //上一轮收集的依赖集合dep以及对应的id
  this.deps = []
  this.depids = new set()
  //新收集的依赖集合dep以及对应的id
  this.newdeps = []
  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.getter = parsepath(exporfn)
   ...
  }
  ...
  this.value = this.get()
 }

 /** * evaluate the getter, and re-collect dependencies. */
 get () {
  pushtarget(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
 }

 /** * add a dependency to this directive. */
 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)
   }
  }
 }

 //每轮收集结束后去除掉上轮收集中不需要跟踪的依赖
 cleanupdeps () {
  let i = this.deps.length
  while (i--) {
   const dep = this.deps[i]
   if (!this.newdepids.has(dep.id)) {
    dep.removesub(this)
   }
  }
  let tmp = this.depids
  this.depids = this.newdepids
  this.newdepids = tmp
  this.newdepids.clear()
  tmp = this.deps
  this.deps = this.newdeps
  this.newdeps = tmp
  this.newdeps.length = 0
 },
 update () {
  ...
  //经过一些优化处理后，最终执行this.get
  this.get();
 }
 // ...
}

updatecomponent = () => {
 vm._update(vm._render(), hydrating) //执行render生成vnode并更新dom
}
new watcher(vm, updatecomponent, noop, {
 before () {
  if (vm._ismounted) {
   callhook(vm, 'beforeupdate')
  }
 }
}, true /* isrenderwatcher */)

while (i--) {
   const dep = this.deps[i]
   if (!this.newdepids.has(dep.id)) {
    dep.removesub(this)
   }
  }
  let tmp = this.depids
  this.depids = this.newdepids
  this.newdepids = tmp
  this.newdepids.clear()
  tmp = this.deps
  this.deps = this.newdeps
  this.newdeps = tmp
  this.newdeps.length = 0

<body>
 <div id="app">
  <div v-if='flag'> </div>   
  <div v-else> </div> 
  <button @click="msg1 += '1'">change</button>   
  <button @click="flag = !flag">toggle</button>  
 </div> 
  <script type="text/javascript">
  var vm = new vue({
   el: '#app',
   data: {
    flag: true,
    msg1: 'msg1',
    msg2: 'msg2'
   }
  })
  </script> 
</body>