Vue生命周期函数&子父组件执行顺序

398 阅读2分钟

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。

image.png

其实理解起来非常简单,父组件先渲染,在渲染的时候发现了子组件就会先去渲染子组件,子组件编译完成后在返回父组件编译。同样的,父组件发现数据更新后,回先去更新子组件的数据,在子组件数据更新并且DOM更新完成后重新回到父组件进行DOM更新。那么在销毁的时候,父组件在销毁的时候回先去销毁子组件,最后在执行自己的销毁钩子函数。