vue依赖收集的具体时机

有没有面试官问过你，vue的依赖收集是在什么时候进行的？

在面试官的灵魂拷问下，整理出了这篇文章。

1、首先，了解下vue生命周期函数

vue生命周期分为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

官网对这个已经解释的很清楚了：实例生命周期钩子

2、从源码层面走个流程找到依赖收集的具体时机

1> 进入页面，Vue开始初始化，执行new Vue()，进入到Vue的构造函数中，在构造函数中执行了_init()方法。

2> 在_init()这个方法里，首先初始化绑定事件和生命周期钩子，然后调用 beforeCreate 这个钩子函数，在这个钩子函数中还没有初始化数据，所以在这个钩子函数中一般不进行操作。

3> 紧接着进行props、data、methods、computed、watch等的初始化，这个过程中已经将数据转换为了响应式数据。紧接着调用了 created 这个钩子函数，在这个钩子函数中已经可以拿到数据，而且可以对数据进行修改，我们可以在这个钩子函数中向后端发起请求，异步获取到数据，这个时候修改数据不会调用update函数，也不会触发其他生命周期钩子。

PS: 在_init()方法中：

// vm 的声明周期相关变量初始化
// $children/$parent/$root/$refs
initLifecycle(vm)
// vm 的事件监听初始化，父组件绑定在当前组件上的事件
initEvents(vm)
// $slots/$scopedSlots/_c/$createElement/$attress/$listeners
initRender(vm)
// 生命钩子的回调
callHook(vm, 'beforeCreate')
// 把 inject 的成员注入到 vm 上
initInjections(vm) // resolve injections before data/props
// 初始化 vm 的 _props/methods/_data/computed/watch
initState(vm)
//  初始化 provide
initProvide(vm) // resolve provide after data/props
// 生命钩子的回调
callHook(vm, 'created')
// 紧接着调用$mount函数
if (vm.$options.el) {
   
    vm.$mount(vm.$options.el)
}

4> 紧接着调用$mount函数，在$mount函数中将 template/el 转化成 render 函数，准备渲染。然后调用了mount