vue生命周期

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停用时调用