我平常使用的 Vue生命周期主要是 created 和 mounted,因为是使用这个来向后端发送请求的,其它的都是稍微了解一下,然后用到再去看官网的或者百度一下.今天我就把我自己的理解结合我找到的两个不错文章,记录下来,以后踩坑使用.
官方图
1.beforeCreate
第一个生命周期的钩子,这时候实例刚刚创建,没有初始化 data,和属性.
beforeCreate:(){ console.log(‘beforeCreate) }
2.created
在实例创建完成后被立即调用,在这里data 已经能读取到了,也可以做属性和方法的的运算,包括事件的回调和 wacherd的回调. 我们写 http 请求一般是在这里,因为实例已经有了
created:(){ console.log(‘created’) }
3.beforeMount
在挂载开始前被调用,相关的函数渲染首次被调用
beforeMount: () { console.log(‘beforeMount”) }
4.mounted
el 被新创建的 vm.$el替换,挂载成功.如果数据不更新,那这就是用户看到的最终效果了,当然了我们也经常会在这个时候发送请求
mounted: () { console.log(‘mounted”) }
5.beforeUpdate
数据更新时调用,data 里面的数据已经更新,但是界面上的数据还是老的,还没有重新渲染节点.
beforeUpdate: () { console.log(‘beforeUpdate”) }
6.updated
组件 DOM 已经更新,组件更新完毕.数据和视图都是一样的. updated: () { console.log(‘updated”) }
7.beforeDestroy
实例销毁前调用,比如询问一下是否确定删除
beforeDestroy: () { console.log(‘beforeDestroy”) }
8.destroyed
Vue 实例销毁后调用.调用后,Vue 实例里面的所有的东西都会被销毁.
destroyed: () { console.log(‘destroyed”) }
总结
Vue 生命周期其实就是 Vue 实例从创建,加载,更新,销毁的全过程,只不过是把他们分阶段而已,使用不同钩子给分开,让开发者方便对 Vue 实例在不同的阶段做不同的事情
第一次加载 demo 其实只有前四个钩子被触发,也就是beforeCreate,created,beforeMount,mounted这四个,后面如果数据有变动会再加载beforeUpdate,updated这两个钩子,如果要销毁的并做一些事情的话使用beforeDestroy,beforeDestroy
