组件生命周期中每个阶段都完成了哪些事情？

组件声明周期中有8个核心的钩子函数，分为初始化阶段，更新阶段和销毁阶段

1.初始化阶段：

（1）beforeCreate :    主要是初始化事件和声明周期

这个阶段还不能操作真实dom，也不能发送数据请求赋值给data

（2） created：主要是初始化注入data和对data做响应式拦截

这个阶段可以发送数据请求然后赋值给data，但是还不能操作真实dom

（3）beforeMount：主要是通过render函数去生成虚拟dom

这个阶段只是生成了虚拟dom，还不能操作真实dom

（4） mounted：主要是挂载dom

这个阶段可以操作真实dom、可以发送数据请求赋值给data、第三方实例化，是用的比较多的一个钩子函数

2.更新阶段（组件数据发生了变化之后进行的阶段）

（1） beforeUpdate：主要是重新生成虚拟dom

这个阶段还不能操作要更新后的真实dom

（2） updated：主要是diff算法比对新旧vdom,然后得到patch补丁对象，然后渲染为真实dom

这个阶段可以操作更新后的真实dom

3.销毁阶段

（1）beforeDestroy

（2）destroyed：主要是用来清除组件无法删除的实例或是事件

组件是否挂载会不会影响钩子函数的执行？

1.组件挂载时

<div id="app"></div> <script src="lib/vue.js"></script> <script> new Vue({ el: '#app', beforeCreate() { console.log('beforeCreate') }, created() { console.log('created'); }, beforeMount() { console.log('beformount') }, mounted() { console.log('mounted'); } }) </script>

这初始化阶段的四个钩子函数都会执行。

 

2.当组件不挂载时

<div id="app"></div> <script src="lib/vue.js"></script> <script> new Vue({ beforeCreate() { console.log('beforeCreate') }, created() { console.log('created'); }, beforeMount() { console.log('beformount') }, mounted() { console.log('mounted'); } }) </script>

初始化阶段的四个钩子函数只会执行前两个（beforeCreate、created） ，因为beforeMount和mounted是跟dom有关的，没有挂载dom就不会执行这两个钩子函数。