vue什么时候收集依赖

在Vue中，依赖收集是指Vue的响应式系统在数据发生变化时，自动将依赖于该数据的视图重新渲染的机制。Vue通过收集依赖来建立响应式依赖关系，以便在数据变化时自动更新视图。

具体来说，Vue在以下情况下会收集依赖：

1. 在组件实例化阶段，Vue会通过递归地遍历组件的所有属性，并将其中的响应式属性转化为getter和setter。在这个过程中，Vue会收集依赖，建立起属性和依赖之间的关系。

2. 当一个响应式的属性被访问时，Vue会将当前的依赖关系添加到一个全局的依赖管理器中。这样就建立了一个依赖关系图。

3. 当数据发生变化时，Vue会通知之前建立的依赖关系图中的所有依赖，依次进行更新。这个更新过程会重新执行对应依赖的getter方法，重新收集依赖。

需要注意的是，依赖收集是针对响应式属性的处理，而普通的属性则不会进行依赖收集。因此，只有被声明为响应式的属性在数据变化时才会触发重新渲染。

Vue 会在以下几种情况下收集依赖：

1. 页面初始化时：当 Vue 实例被创建并初始化时，Vue 会遍历实例的数据（data）属性，收集依赖。

2. 模板解析时：当 Vue 编译模板时，Vue 会根据模板中的指令和表达式，生成对应的渲染函数。在生成渲染函数的过程中，Vue 会收集依赖，将模板中的响应式数据和渲染函数关联起来。

3. 响应式数据被访问时：当响应式数据被访问时，Vue 会通过 getter 拦截器收集依赖。每当一个响应式数据被访问时，Vue 会将当前的依赖（通常是一个观察者对象）添加到当前的依赖列表中。

4. 计算属性被访问时：当计算属性被访问时，Vue 会在计算属性的 getter 中收集依赖。如果计算属性依赖的响应式数据变化了，那么计算属性也会被标记为 dirty，下次访问时会重新计算。

5. Vue.watch 监听的数据变化时：当 Vue.watch 监听的数据发生变化时，Vue 会调用对应的回调函数。在回调函数中，Vue 会收集依赖，并更新相应的视图。

在以上情况下，Vue 会将依赖添加到一个全局的依赖管理器中。当响应式数据发生变化时，Vue 会通过 setter 拦截器通知依赖管理器，依赖管理器会遍历通知所有依赖进行更新。这样，Vue 就能实现响应式的数据变化和视图的更新。

Vue在收集依赖方面，主要涉及到两个阶段：初始化阶段和运行阶段。

1. 初始化阶段
   在Vue实例化过程中的初始化阶段，会首先调用_init方法进行初始化操作。在这个方法中，Vue会执行以下几个重要的操作来收集依赖。

   • 初始化组件的Watcher。Vue中的组件会包含多个Watcher，每个Watcher对应一个组件的渲染函数。
   • 初始化计算属性的Watcher。计算属性会关联到一个称为“计算属性监听器”的Watcher，在计算属性中读取响应式数据时，会触发Getter方法，从而将Watcher添加到依赖中。

2. 运行阶段
   在Vue实例运行过程中，会触发数据的依赖收集。主要体现在以下两个方面。

   • 数据响应式处理。Vue通过Object.defineProperty方法对组件实例的数据进行劫持，在数据的getter函数中，将正在执行的Watcher与当前数据关联起来，从而进行依赖收集。当数据发生变化时，会触发数据的setter函数，通知与之关联的Watcher执行更新操作。
   • 模板渲染。Vue将模板转换为渲染函数，渲染函数会关联到一个称为"渲染Watcher"的Watcher，在渲染过程中，读取组件实例的数据，触发数据的getter函数，将正在执行的渲染Watcher添加到依赖中。

需要注意的是，Vue的依赖收集是在第一次渲染组件时进行的，后续的更新只会更新已经收集的依赖，不会重新收集依赖。当数据发生变化时，Vue会通过更新依赖的方式重新渲染组件。

总结：Vue在初始化阶段和运行阶段都会进行依赖收集，主要涉及到组件的Watcher、计算属性的Watcher以及渲染Watcher。在初始化阶段，会初始化Watcher；在运行阶段，通过数据的响应式处理和模板渲染来触发依赖收集。