vue 什么时候收集依赖

Vue 在编译模板时会进行依赖收集，具体的收集时机是在创建 Watcher 对象时。Watcher 对象是用来观察模板中数据的变化的，当模板中的数据发生变化时，Watcher 会收到通知并更新视图。依赖收集就是在创建 Watcher 对象时，将依赖的数据对象与 Watcher 对象建立关联，当数据对象发生变化时，Watcher 就能够接收到变化的通知。

Vue 的依赖收集是基于响应式的原理实现的。当模板中使用数据对象中的某一个属性时，Vue 会将该属性与当前的 Watcher 对象建立关联。这样，当该属性发生变化时，Vue 就能实时更新与该属性相关联的视图。为了实现这样的关联关系，Vue 使用了一个全局的依赖收集器，称为 Dep。Dep 对象中保存了当前 Watcher 对象以及与之相关的所有依赖。

Vue 在编译模板时，会对模板中的每一个表达式（比如{{msg}}）进行解析，并创建一个对应的 Watcher 对象。在解析表达式过程中，Vue 会通过访问数据对象中的对应属性来触发该属性的 getter 方法，从而建立依赖关系。当数据对象的属性发生变化时，会触发属性的 setter 方法，setter 方法会发送通知给与之相关联的 Watcher 对象，从而触发视图的更新。

总结来说，Vue 在进行依赖收集时，是在创建 Watcher 对象时将依赖的数据对象与 Watcher 对象建立关联。这样，当数据对象发生变化时，就能够触发依赖的 Watcher 对象更新视图。通过这种方式，Vue 实现了响应式的数据绑定，使得视图能够实时反映数据的变化。

Vue在创建响应式数据时会收集依赖，具体的收集时机是在组件渲染过程中。

1. 初始化阶段：在组件初始化阶段，Vue会对data中的属性进行遍历，将属性转化为响应式数据，并且给每个响应式数据创建一个Dep对象。

2. 模板解析阶段：Vue会解析组件的模板，当遇到数据绑定表达式时，会将表达式的对应属性添加为依赖。例如，当解析到{{message}}时，Vue会将message属性添加为该表达式的依赖。

3. 组件渲染阶段：当组件进行渲染时，会执行render函数或template模板中的相关代码。在执行过程中，如果响应式数据被读取（访问），会触发getter函数，并收集当前正在执行的watcher作为依赖。watcher对象是负责观察响应式数据的变化，并触发相应的更新操作。

4. 嵌套组件的渲染：如果一个组件嵌套了其他的子组件，那么在子组件进行渲染时，也会按照上述的方式进行依赖收集。这样，当任意一个响应式数据发生变化时，会触发整个组件树的更新操作。

5. 手动依赖收集：除了在组件渲染过程中自动收集依赖，Vue也提供了一些API来手动收集依赖。例如，Vue.watch函数可以用来观察一个响应式数据的变化，在watch函数内部可以手动获取和处理依赖。

综上所述，Vue会在组件渲染过程中收集依赖，这样可以确保在响应式数据发生变化时，能够准确地通知需要更新的组件。

Vue在响应式系统中通过收集依赖来建立响应式关系，以确保视图可以实时更新。具体来说，Vue在以下几个时机进行依赖收集：

1. 初始化时
   当Vue实例化时，会对data对象中的每个属性进行递归遍历，并为每个属性创建一个Dep对象（依赖对象）。同时也会为data对象的每个属性设置getter和setter方法。

2. 模板编译阶段
   在模板编译阶段，Vue将模板解析成渲染函数，根据模板中的指令和插值表达式（如v-model、{{}}）等，生成对应的更新函数。这些更新函数会在特定时机被调用，从而触发依赖收集。

3. 访问响应式属性时
   当我们在渲染函数中访问响应式的数据属性时，会触发该属性对应的getter函数。getter函数执行时，会收集当前正在渲染的组件作为依赖。这个过程会持续到渲染函数中所有依赖项都被访问为止。

4. 侦听器（watcher）注册时
   Vue提供了侦听器（watcher）机制，用于监听一个或多个响应式数据的变化。当我们在组件中定义了侦听器，并将其与响应式属性关联时，Vue会在侦听器注册过程中自动进行依赖收集。

总结起来，Vue在初始化、模板编译、访问响应式属性和侦听器注册这几个时机都会进行依赖收集。依赖收集的目的是为了建立响应式关系，并在数据发生变化时能够自动更新视图。通过依赖收集，Vue能够精确追踪到每个组件的依赖关系，从而实现高效的响应式更新机制。