Vue生命周期

1、什么是Vue生命周期？

Vue实例从开始创建到销毁的过程就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM——>渲染、更新——>渲染、销毁等一系列过程，我们称之为Vue生命周期。

2、Vue生命周期的作用是什么？

在生命周期的过程中会运行一些叫做生命周期钩子的函数，这给了我们在不同阶段添加自己代码的机会，使得我们可以更好地控制Vue实例。

3、生命周期总共有几个阶段？

总共有八个阶段：创建前（beforeCreate）/创建后（created）、挂载前（beforeMount）/挂载后（mounted）、更新前（beforeUpdate）/更新后（updated）、销毁前（beforeDestroy）/销毁后（destroyed）。

4、页面第一次加载会运行哪几个生命周期钩子函数？

页面第一次加载时会运行这四个生命周期钩子函数：beforeCreate、created、beforeMount、mounted。

5、DOM渲染在生命周期的哪个阶段就已经完成？

DOM渲染在mounted阶段已经完成。

6、简单描述一下你对Vue生命周期

先上图：

在谈到Vue生命周期的时候，我们首先需要创建一个Vue实例，也就是在new Vue()的对象过程当中，首先初始化一些默认的生命周期钩子和默认事件，之后调用beforeCreate，这个阶段data和methods中的数据都没有初始化。然后在初始化注入和校验之后，再去调用created，该阶段data和methods里面的数据都已经初始化好了。所以在beforeCreate的时候千万不能去修改data里面的数据和调用methods中的方法，可以添加loading事件。最早在created里面可以去修改data里面的数据和调用methods里面的方法，也可以向后端发起请求。
当created完成之后，会去判断实例里面是否含有“el”选项，如果没有就会调用vm.$mount(el)方法，然后执行下一步；如果有的话，直接执行下一步，即判断是否含有“template”选项，如果有的话，就会把template解析成一个render function，这是template的编译过程。如果没有的话，会将“el“外部的HTML作为template进行编译。有了render function之后就会执行beforeMounted，创建vm.$el并用它替换el,然后执行mounted，表示Vue实例已经挂载完成，数据渲染成功，这个实例创建阶段已经完成。
后续的钩子函数执行过程都是需要外部触发才会执行。比如有数据发生变化，会先调用beforeUpdate，然后通过虚拟DOM重新渲染、更新应用，最后updated更新完毕。当组件销毁的时候，会先执行beforeDestroy，然后解除绑定、销毁子组件和事件监听器，销毁完毕执行destroyed钩子。