1回答

ustbhuangyi

2019-11-01

defineReactive 中定义了 dep，是为了给响应式对象做依赖收集的，比如我们在 data 中初始化了一个对象 

data() {
   return {
     a: {
        msg: 'a'
     }
   }
}

那么在 initData 的时候，会把 a 通过 defineReactive 定义为响应式对象，当我们访问 a 的时候，会触发 getter，执行 dep.depend() 做依赖收集。

然后当我们修改 a 的时候，会触发 setter 从而派发更新，这就是基本的响应式原理。

但是由于 Object.defineProperty 的限制，对于给 a 添加一个新属性 b 这种情况，是不会触发 setter 的时候，Vue 提供了一个 API Vue.set，那么 Vue.set 如何做到的呢？



在定义 getter 的时候，注意红框 2 段代码，对应到我们的例子，我们会给 a 添加一个 __ob__ 对象，并且我们在 Observer 构造函数定义了 this.dep = new Dep()，我们就可以执行 childOb.dep.depend() 做依赖收集。

然后再看 set 的实现



注意红框的代码，当我们执行 Vue.set(this.a, 'b',1) 的时候，会访问到我们之前在 a 中定义的  __ob__ 对象，然后手动执行了 ob.dep.notify() 触发了更新。这就是为什么要在 Observer 中定义 dep 以及它的作用。

0

0