vue生命周期，为什么有生命周期？有哪些钩子函数？

1、生命周期：
每个vue实例或者组件从创建到显示再到废弃的过程就是vue的生命周期。
2、为什么会有生命周期：
很多时候我们希望能在vue生命周期的过程中执行一些操作，所以才有了生命周期钩子。生命周期钩子函数允许我们在实例的不同阶段执行各种操作，便于我们更好的控制和使用实例。
接下来首先看个实例：

1）、beforeCreated： ---- 实例创建前的阶段，此时改实例内所有东西都还没有创建，所以在这个生命周期钩子函数中，this.data，都是undefined；如图：

image.png

2）、created: ----- 实例创建完成的阶段，此时可以拿到实例中的this.message , this.el。
在这一步，实例已完成：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调的配置。但是，挂载阶段还没开始，$el property 目前尚不可用。

image.png

由此说明在beforeCreated 和 created 钩子函数之间的生命周期，实例开始进行初始化事件，进行数据的观测，在created的时候数据已经和data属性进行绑定，在这个生命周期钩子函数中，我们可以获取到data的值，并对他进行操作；如图：

image.png

3）、beforeMount和 mounted钩子函数的生命周期，此时是给vue实例对象添加el,,在挂载之前调用，相关的render函数首次被调用。 mounted()挂载完成后可以拿到el替换掉。

image.png

4）、beforeUpdate钩子函数和updated钩子函数间的生命周期。
当vue发现data中的数据发生变化，会触发对对应组件的重新渲染，当数据改变后调用beforeupdata，当渲染完成后调用updated钩子函数。可以通过点击message加10的事件来触发update事件。输出如下图：

image.png

beforeUpdate（）数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器。
updated() 数据更改导致的虚拟DOM重新渲染和打补丁，在这之后调用。当这个钩子函数调用时，组件DOM已经更新，此时可以执行依赖于DOM的操作。实际开发中，应该尽量避免在此期间更改状态，如果想要改变状态，建议选择计算属性和watch来代替它。特别注意：updated不会保证所有的子组件也都一期被重绘，如果想要等到整个试图都重绘完毕，可以在这里调用this.$nextTick().

可以看到beforeUpdate和updated里面的message值都进行了加10 的操作，所以data值改变后，先触发beforeUpdata钩子函数，当页面渲染完成后调用updated。这点可以通过在updated钩子函数中使用alert打断程序运行，可以看到页面中并没有更新，

image.png

注意：通过试验证明，在mounted钩子函数中执行修改data的操作会触发beforeUpdate，而它之前的函数中只要不是可以跳出主线程的数据操作，都不会触发beforeUpdate。例如使用setTimeout会使其中代码跳出主线程到异步线程中，所以它的执行会在mounted之后，所以会触发beforeUpdate。
图例：

1、当：

image.png

得到的结果为：

image.png

2、当：

image.png

得到的结果为：

image.png

5）、beforeDestroy和destroyed钩子函数间的生命周期。
beforeDestroy钩子函数在实例销毁之前调用,在这一步实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

最后附上官网生命周期整个流程图：vue组件是可复用的vue实例，所以每个组件的创建都会用到以上生命周期钩子函数。

Vue 实例生命周期