Vue钩子函数
在Vue中给我们提供了一些生命周期钩子函数,让我们可以在组件不同的阶段去执行需要的操作,按照执行的先后顺序。如下排列。
1.beforeCreate
在Vue初始化一些内部事件以及钩子函数之后执行这个回调函数
2.created
当Vue完成了数据注入以及数据响应式后执行这个回调,在项目中常用来ajax的请求调用。
3.beforeMount
Vue的DOM挂载完成之前调用这个钩子函数,在这个生命周期阶段用不了任何DOM。
4.mounted
Vue整个编译完成之后被调用,这个阶段就可以操作DOM元素了,一些像echarts 百度地图 swiper 这类的需要使用真实DOM的插件的初始化,都可以在这个钩子函数中使用。
5.beforeUpdate
Vue的数据更新之后但是DOM没有更新之前被调用
6.updated
Vue的数据更新并且DOM也被更新后调用这个钩子函数
需要配合keep-alive使用的两个钩子函数(注意:这两个钩子函数会在beforeDestory,destoryed之前被调用)
activated
这个钩子函数会在被keep-alive缓存的组件被激活时触发
destoryed
这个钩子函数则会在被缓存的组件失活时(也可以理解为被销毁)被触发
销毁的钩子函数 可以用于一些事件和定时器的清除;通过new Vue得到的根实例,只能通过$destory()进行销毁
7.beforeDestory
组件被销毁之前被调用。
8.destoryed
组件被销毁之后调用这个钩子函数
接下来我们来了解子父组件的生命周期函数的执行顺序
具体的执行顺序如下
父组件beforeCreate-->父组件created-->父组件beforeMount-->子组件beforeCreate-->子组件created-->子组件beforemount-->子组件mounted-->父组件mounted-->父组件beforeUpdate-->子组件beforeUpdate-->子组件updated-->父组件updated-->父组件beforeDestory-->子组件beforeDestory-->子组件destoryed-->父组件destoryed。
其实理解起来非常简单,父组件先渲染,在渲染的时候发现了子组件就会先去渲染子组件,子组件编译完成后在返回父组件编译。同样的,父组件发现数据更新后,回先去更新子组件的数据,在子组件数据更新并且DOM更新完成后重新回到父组件进行DOM更新。那么在销毁的时候,父组件在销毁的时候回先去销毁子组件,最后在执行自己的销毁钩子函数。