生命周期就是从初始化到渲染到页面到最后离开页面的销毁的整个过程
beforeCreate()
- dom创建之前，此时data与methods都还没有被创建，无法调用
created()
- dom创建完成.此时可以调用data,methods等,但无法操作dom,因为dom只是创建完成,还没有进行渲染.如果需要获取dom,可以用this.$nextTick(),此函数会在dom进行更新后调用,是基于Promise的一个方法
- created是最适合调用异步请求的一个周期，虽然在created、beforeMount、mounted三个周期内data都已经创建，可以对数据进行赋值，但是在created中调用异步请求能够更快获取到服务器端的数据，减少loading时间
beforeMount()
- dom创建完成,还未进行渲染
mounted()
- dom渲染完毕,在这里可以直接使用js方法获取操作dom
beforeUpdate()
- 数据即将更新之前触发的函数
update()
- 数据更新时触发
activited ()
- keep-alive组件激活的时候触发的函数
deactivited()
- keep-alive组件停用时触发的函数
beforeDestroy()
- 页面销毁之前触发
- to(即将跳转到的)页面的created函数会比from(要离开的)页面的beforeDestroy先触发
destroyed()
- 页面销毁触发
父组件和子组件的生命周期钩子函数执行顺序
- 可以分为四个部分
- 加载渲染过程
- 父beforeCreate -> 父created ->父beforeMount ->子beforeCreate ->子created ->子beforeMount ->子mounted ->父mounted(因为子组件也是父组件的一部分,所以子组件渲染完成之后,父组件才能渲染完成)
- 子组件更新过程
- 父beforeUpdate -> 子beforeUpdate ->子update ->父update
- 父组件更新过程
- 父beforeUpdate -> 父update
- 销毁过程
- 父beforeDestroy ->子beforeDestroy ->子destroyed ->父destroyed
