vue2源码解析——vue中如何进行依赖收集、响应式原理

结合下图：vue每个组件实例vm都有一个渲染watcher。每个响应式对象的属性key都有一个dep对象。所谓的依赖收集，就是让每个属性记住它依赖的watcher。但是属性可能用在多个模板里，所以，一个属性可能对应多个watcher。因此，在vue2中，属性要通过dep对象管理属性依赖的watcher。

get方法触发：在初始化时编译器生成render函数，如果用到了响应式数据，触发Object.defineProperty的get方法；此时依赖收集dep开始工作，dep.depend会让watcher和dep对象将彼此都加入自己管理的deps和subs数组中，建立两者的依赖关系。

set方法触发：组件挂载完成后，操作页面，当数据变化后，触发Object.defineProperty的set方法，此时依赖通知开始工作。dep.notify方法通知自己subs数组中所有的watcher进行更新。在watcher实例中有updateComponent方法，可以进行对应组件的更新。

依赖收集的作用

假设我们现在有一个全局的对象，我们可能会在多个 Vue 对象中用到它进行展示。

let globalObj = {
    text1: 'text1'
};

let o1 = new Vue({
    template:
        `<div>
            <span>{
  {text1}}</span> 
        <div>`,
    data: globalObj
});

let o2 = new Vue({
    template:
        `<div>
            <span>{
  {text1}}</span> 
        <div>`,
    data: globalObj
});

 这个时候，我们执行了如下操作。

globalObj.text1 = 'hello,text1';

我们应该需要通知 o1 以及 o2 两个vm实例进行视图的更新，「依赖收集」会让 text1 这个数据知道“哦～有两个地方依赖我的数据，我变化的时候需要通知它们～”。 最终会形成数据与视图的一种对应关系，

图解依赖收集

1.定义响应式过程

• Vue 初始化时，进行了数据的 get、set 绑定，并创建了一个 Dep 对象。
• 对于数据的 get、set 绑定我们并不陌生，但是 Dep 对象什么呢？
• Dep 对象用于依赖收集，它实现了一个发布订阅模式，完成了数据 Data 和渲染视图 Watcher 的订阅，

 2.Dep和Watcher之间的关系

Vue 通过 defineProperty 完成了 Data 中所有数据的代理，当数据触发 get 查询时，会将当前的 Watcher 对象加入到依赖收集池 Dep 中，当数据 Data 变化时，会触发 set 通知所有使用到这个 Data 的 Watcher 对象去 update 视图。整个过程中，dep对象和watcher实例是多对多双向记忆的。watcher也会记住模板使用了哪些依赖的dep。

思考：dep是跟着key走的还是object走的

在 Vue 中，Dp e对象是跟着对象的属性（key）走的，而不是跟着整个对象走的。每个响应式数据（如 data 中的属性）都会有一个对应的 Dep 实例，Vue 会为对象的每个属性创建一个独立的 Dep 实例来管理依赖关系。当访问对象的某个属性时，Vue 会将该属性对应的 Dep 实例与当前的 Watcher 实例建立关联，从而实现依赖收集和更新机制。

思考：没有访问的数据，使用set修改会进行依赖收集吗？

在 Vue 2 中，当数据发生变化时，会触发一个 watcher 的更新回调，从而更新对应的视图。这个更新过程中，会调用 dep.notify() 方法，通知所有依赖该数据的 watcher 进行更新。

在这个过程中，需要注意的是，只有在数据被访问时，才会进行依赖收集，也就是说，如果某个模板中没有通过 get 方法访问过某个属性，那么该属性的变化就不会触发该模板的更新。这是因为在 Vue 中，依赖收集是在数据被访问时进行的，如果数据没有被访问，那么就没有依赖关系，自然也就不