vue父子组件生命周期执行顺序

1、生命周期函数

1.beforeCreate实例创建前执行。

el 和 data 都为 undefined，还未初始化。methods、computed 以及 watch 上的数据或方法均不能被访问。

2.created：实例初始化完成后执行。

页面还没开始渲染，不可访问 DOM 节点。el 仍然为 undefined。但可以操作 data 与 methods 等。可以做一些初始数据的获取，在当前阶段无法与 DOM 进行交互，如果需要，可以通过 $nextTick 来访问 DOM。

3.beforeMount：挂载前执行。

el 和 data 都初始化了，虚拟 DOM 已经创建完成，即将开始渲染。

4.mounted：页面渲染完毕时执行。

真实的 DOM 挂载完成，此时el已经渲染完成并挂载到实例上，可访问 DOM 节点。可使用 refs 对 DOM 进行操作。也可以向后台发送请求。

5.beforeUpdate：数据发生更新时执行。

此时 Vue 实例中的数据是最新的了，但是页面中的数据还是旧的，可以在此时进一步更改数据，而不会造成重新渲染。

6.updated：数据发生更新导致的 DOM 重新渲染完成时执行。

此时 DOM 已经更新，可以执行 DOM 相关操作。
虽然updated函数会在数据变化时被触发，但却不能准确的判断是哪个属性值被改变，所以实际情况中用computed或watch函数来监听属性的变化，并做一些其它的操作。

7.beforeDestroy：实例销毁前执行。

实例仍然完全可以使用。在此阶段一般进行善后工作，如清除计时器、解除绑定等。

8.destroyed：实例销毁完成。

实例绑定的所有东西都会被解除，如解除事件监听和对 DOM的数据绑定，所有子实例也统统被销毁，组件被拆解将无法使用。改变 data 也不会再重新渲染，但是 DOM 结构依然存在。

其他：

在使用v-router时有时需要使用keep-alive来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载或切换状态的时候进行某些操作，可以使用activated钩子调用。
一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现。利用keep-alive组件进行包裹router-view组件，将不活动的组件缓存起来。

<keep-alive>
	<router-view/>
</keep-alive>

2、生命周期的执行顺序

2.1初始化

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted->父mounted

2.2数据更新

父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

2.3销毁

父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed