vue2生命周期钩子

184 阅读1分钟

Vue生命周期即为一个组件从出生到死亡的一个完整周期,主要包括以下4个阶段:创建,挂载,更新,销毁

 创建前:beforeCreate
 创建后:created
 
 挂载前:beforeMount
 挂载后:mounted
 
 更新前:beforeUpdate
 更新后:updated
 
 销毁前:beforeDestroy
 销毁后:destroyed
 
 (进入页面或者组件,执行的顺序也是上面的顺序)

平时用的比较多的钩子是created和mounted,created用于获取后台数据,mounted用于dom挂载完后做一些dom操作,以及初始化插件等.beforeDestroy用户清除定时器以及解绑事件等

另外还新增了使用内置组件 keep-alive 来缓存实例,而不是频繁创建和销毁(开销大)

actived 实例激活

deactived 实例失效

> 在那个阶段有$el,在哪个阶段有$data

    beforeCreate:啥也没有
    created:没有$el,有$data
    beforeMount:没有$el,有$data
    mounted:都有

> 如果加入keep-alive,第一次进入组件会执行那些生命周期

    beforeCreate
    created
    beforeMount
    mounted
    actived

> 如果加入keep-alive,第一次进入组件会执行那些生命周期

   actived