详解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/getexport 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>