生命周期
beforeCreate:最初调用触发,data和events都不能用。可以在这里处理整个系统加载的Loading;
created:已经具有响应式的data,可以发送events。可以在这里去发送请求。
beforeMount:在模板编译后,渲染之前触发。SSR中不可用。基本用不上整个Hook。
mounted:在渲染之后触发,并可以访问组件中的DOM以及$ref,SSR中不可用。
beforeUpdate:在数据改变后,模板改变前触发。切勿使用它监听数据变化(使用计算属性和watch监听)。
updated:在数据改变后、模板改变后触发。常用于渲染后的打点、性能检测或者触发vue组件中非vue组件的更新。
beforeDestroy:组件卸载前触发,可以在此时清理事件、计时器或者取消订阅操作。
destroyed:卸载完毕后触发,可以做最后的打点或事件触发操作。
源码分析
initLifecycle
在vue初始化的时候会执行initLifecycle
initLifecycle会在beforeCreated钩子触发前调用,标志位在该方法中初始化为false,在对应的钩子函数触发后更新为true
callHook
这个方法用于执行钩子函数
拿到注册的钩子函数,遍历执行,因为一个实例通过mixins可能有很多个相同钩子,所以合并为数组
钩子函数触发时机
beforeCreate created
beforeMount mounted
initMixin方法中调用了vm.$mount,$mount中调用了mountComponent
beforeUpdate updated
activated deactivated
beforeDestory destoryed
vue系列课程
最近会陆续的对vue进行源码分析,一系列课程如下: