beforeCreate
实例初始化之后执行的钩子函数,在此时data、computed、watch、mehtods都还没有完成.
我们可以在这里做loading显示
created
实例创建完成,此时data、computed、watch、mehtods、props都已经完成,但是dom还没有挂载,所以不能访问到$el(挂载点),$ref也还是空数组
在这个阶段已经完成了数据注入(外部组件数据传入)和数据校验(检查组件内的数据是否有冲突),所以当前环境的数据是安全可靠的,我们可以在这里执行异步请求
但是在该阶段页面还是空白,如果执行的请求信息较多,可能会造成页面白屏时间过长,要看具体情况使用
beforeMount
在组件挂载之前调用,这一步之前会找到对应的template,渲染成render.我们可以在页面展示前做最后的数据更改
mounted
组件挂载之后,我们可以访问到$el,可以使用$refs,可以执行dom操作了.这一步常用来获取dom节点和执行异步请求
要注意的是,mouted不保证所有子组件也被挂载了,如果想要等到整个视图都渲染完毕,可以在该生命周期中使用this.$nextTick
mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }
beforeUpdate
响应数据更新之前调用发生在虚拟dom打补丁之前.注意的是组件第一次执行生命周期的时候并不会调用该函数.
适合在更新之前访问现有dom,比如手动移除已添加的事件监听器;可以对更新的数据做最后更改和检测
Updated
组件更新完成后调用,可以获取最新的dom.在这里谨慎执行修改数据的操作,以免造成死循环
beforeDestory
实例销毁之前,我们可以在这里执行定时器销毁,解绑全局事件等操作
destoryed
实例销毁之后
keep-alive
keep-alive用于缓存组件,被keep-alive包裹的子组件不会在经历创建和销毁.keep-alive有2个生命周期
activated:在keep-alive（缓存组件，避免重新渲染）激活时调用
deactivated：在keep-alive停用时调用