有没有面试官问过你,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> 紧接着调用 m o u n t 函 数 , 在 mount函数,在 mount函数,在mount函数中将 template/el 转化成 render 函数,准备渲染。然后调用了mountCo