vue什么时候开始收集依赖

Vue 在组件初始化时开始收集依赖。

具体来说，当 Vue 实例化一个组件并进行渲染时，Vue 会先对模板进行编译，生成一个渲染函数。该渲染函数会在组件需要被渲染到 DOM 中时被调用，生成组件的虚拟 DOM。

在生成虚拟 DOM 的过程中，Vue 会对模板中的每一个数据绑定表达式进行依赖收集。依赖收集的目的是为了建立起数据与视图之间的关联，当数据发生变化时，可以快速找到对应的视图进行更新。

在依赖收集的过程中，Vue 会使用一个称为“观察者”(Watcher)的对象来记录依赖关系。每个观察者对应一个数据绑定表达式，它会在表达式所依赖的数据发生变化时，通知对应的视图进行更新。

Vue 的依赖收集是通过“响应式系统”实现的。Vue 会将组件中的所有数据转换成响应式数据，并通过劫持数据的 getter 和 setter，实现数据变化的监听和触发。当数据被访问时，触发相应的 getter，将观察者添加到依赖中；当数据发生变化时，触发相应的 setter，通知观察者更新视图。

总结起来，Vue 在组件初始化时开始收集依赖，这样可以建立起数据与视图之间的关联，从而实现数据的响应式更新。通过依赖收集，Vue 可以精确地知道哪些数据被哪些视图所依赖，从而在数据变化时，快速找到需要更新的视图进行更新。

在Vue.js中，收集依赖是在组件的“渲染函数”（render function）执行过程中进行的。具体来说，Vue会在组件的渲染函数执行时，收集该组件中哪些数据被使用了，并建立起“数据与依赖之间的关联关系”。

下面是关于Vue.js收集依赖的一些重要概念和流程：

1. 渲染函数和虚拟DOM：Vue.js使用虚拟DOM来描述真实DOM的结构，在组件渲染时会调用渲染函数来生成虚拟DOM。渲染函数是一个返回虚拟DOM的函数。

2. 数据响应性：在Vue.js中，数据响应性是通过Vue实例的响应式系统实现的。当组件渲染函数执行时，Vue会自动在相关的数据属性上添加“getters”，以便收集依赖并建立依赖关系。

3. 依赖收集：在组件渲染函数执行的过程中，如果有属性访问了响应式数据，Vue会将这个属性和对应的渲染函数建立起依赖关系。“依赖”就是指在组件渲染过程中使用到的响应式数据属性。

4. 追踪依赖：Vue使用一个全局变量Dep来追踪当前正在收集的依赖。当组件渲染函数执行时，会进入一个“依赖追踪”的阶段，此时所有访问了响应式数据的属性都会触发依赖的“getters”，将该依赖添加到Dep中。

5. 依赖关系的建立：Vue将组件渲染函数中访问的响应式数据和Dep建立起依赖关系。当响应式数据发生变化时，Vue会通过Dep通知对应的渲染函数进行更新，这样可以保证当响应式数据变化时，相关的渲染函数会被重新执行。

需要注意的是，Vue的依赖收集是在组件的渲染过程中进行的，而不是在数据发生变化时进行的。这是为了避免不必要的依赖收集和更新操作，提高性能。只有在组件进行渲染时，才会对依赖进行收集和建立关系。如果响应式数据没有在渲染中被使用，就不会进行依赖收集。

Vue 在进行响应式处理时，会通过收集依赖来跟踪相应的依赖关系。Vue 会在以下三种情况下开始收集依赖：

1. 模板解析阶段：当 Vue 解析模板时，会对模板表达式中出现的所有数据进行依赖收集。Vue 的模板编译器会将模板表达式中的数据访问转换为对应的 get 操作，从而触发依赖收集。Vue 会在模板解析阶段遍历模板中的所有节点，包括标签、属性、指令等，将其中涉及的数据收集起来。

2. 响应式数据访问阶段：当组件实例访问响应式数据时，会触发响应式数据的 getter 函数，从而开始收集依赖。在组件实例的计算属性、侦听器、渲染函数等地方，如果访问了响应式数据，Vue 会在数据的 getter 函数中进行依赖收集。

3. Watcher 更新阶段：当依赖的数据发生变化时，会通知相关的 Watcher 去更新视图。在 Watcher 的 update 方法中，会重新执行依赖收集的过程，并将依赖的数据添加到 Watcher 的依赖列表中，以便在数据变化时能够触发相应的更新。

总而言之，Vue 在解析模板时收集模板中的依赖关系，在组件实例访问响应式数据时收集依赖，并在 Watcher 更新阶段重新收集依赖。这样一来，Vue 就能够建立起组件实例与数据之间的依赖关系，实现响应式的数据绑定和更新。