详解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: "color: #ff0000">Watcher

源码地址


//解析表达式（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"${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();
 }
 // ...
}



依赖收集的触发是在执行render之前，会创建一个渲染Watcher：


updateComponent = () => {
 vm._update(vm._render(), hydrating) //执行render生成VNode并更新dom
}
new Watcher(vm, updateComponent, noop, {
 before () {
  if (vm._isMounted) {
   callHook(vm, 'beforeUpdate')
  }
 }
}, true /* isRenderWatcher */)




在渲染Watcher创建时会将Dep.target指向自身并触发updateComponent也就是执行_render生成VNode并执行_update将VNode渲染成真实DOM，在render过程中会对模板进行编译，此时就会对data进行访问从而触发getter，由于此时Dep.target已经指向了渲染Watcher，接着渲染Watcher会执行自身的addDep，做一些去重判断然后执行dep.addSub(this)将自身push到属性对应的dep.subs中,同一个属性只会被添加一次，表示数据在当前Watcher中被引用。
当_render结束后，会执行popTarget()，将当前Dep.target回退到上一轮的指，最终又回到了null，也就是所有收集已完毕。之后执行cleanupDeps()将上一轮不需要的依赖清除。当数据变化是，触发setter，执行对应Watcher的update属性，去执行get方法又重新将Dep.target指向当前执行的Watcher触发该Watcher的更新。
这里可以看到有deps,newDeps两个依赖表，也就是上一轮的依赖和最新的依赖，这两个依赖表主要是用来做依赖清除的。但在addDep中可以看到if (!this.newDepIds.has(id))已经对收集的依赖进行了唯一性判断，不收集重复的数据依赖。为何又要在cleanupDeps中再作一次判断呢？


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



在cleanupDeps中主要清除上一轮中的依赖在新一轮中没有重新收集的，也就是数据刷新后某些数据不再被渲染出来了，例如：


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




每次点击change，msg1都会拼接一个1，此时就会触发重新渲染。当我们点击toggle时，由于flag改变，msg1不再被渲染，但当我们点击change时，msg1发生了变化，但却没有触发重新渲染，这就是cleanupDeps起的作用。如果去除掉cleanupDeps这个步骤，只是能防止添加相同的依赖，但是数据每次更新都会触发重新渲染，又去重新收集依赖。这个例子中，toggle后，重新收集的依赖中并没有msg1，因为它不需要被显示，但是由于设置了setter，此时去改变msg1依然会触发setter，如果没有执行cleanupDeps,那么msg1的依赖依然存在依赖表里，又会去触发重新渲染，这是不合理的，所以需要每次依赖收集完毕后清除掉一些不需要的依赖。
总结
依赖收集其实就是收集每个数据被哪些Watcher（渲染Watcher、computedWatcher等）所引用，当这些数据更新时，就去通知依赖它的Watcher去更新。


以上所述是小编给大家介绍的Vue源码学习之双向绑定详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！