学习vue的生命周期

什么是生命周期函数？

vue的生命周期函数（又称为钩子函数）是一个vue实例从开始创建，到初始化数据，到渲染挂起，到卸载的整个过程，类比人的生命周期，人的一生从出生，到成年，到中年，到老年，到去世，分了几个阶段，而vue的生命周期也分了好几段，分别是beforCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed。

为什么需要生命周期函数？

方便使用者在vue实例一些阶段进行一些操作，比如进行一些数据的初始化，或者渲染完dom后，可以初始化echarts图表等。

正文

先放官网的图压压惊

image

从图中可以看出，vue的生命周期大概包括下面几个钩子

• beforCreate(初始化界面前)

• created(初始化界面后)

• beforeMount(渲染dom前)

• mounted(渲染dom后)

• beforeUpdate(更新数据前)

• updated(更新数据后)

• beforeDestroy(卸载组件前)

• destroyed(卸载组件后)

beforeCreate(初始化界面前)

在beforeCreate时，进行了一些事件的初始化以及生命周期函数初始化。

created(初始化界面后)

主要进行了数据的初始化，如data里面的数据初始化。所以，在created之后，才可以使用vue实例的data。而在beforeCreate()时是不可以调用data的，实操如下

例子：

carbon.png

上面代码是在beforeCreate()和created()两个生命周期函数中输出messge的信息。

结果如下：

mounted.png

beforeMount

将vue挂载到dom，将模板编译出来，将template编译成浏览器认识的模式，但dom元素还不能看到

mount

主要进行渲染，就是将dom元素渲染出来，让我们可以进行操作。我们举个例子来认识beforeMount和mount的区别

例子

mounted.png

输出结果：

屏幕快照 2019-07-06 下午10.04.51.png

beforeUpdate

数据更新前

updated

数据更新后

update和beforeUpdate比较简单就不举例子了。

beforeDestroy

实例销毁前

destroy

实例销毁后

例子

销毁.png

简单解释一下例子，例子中是注册一个叫component-text的子组件，然后通过v-if的特性（为true是渲染dom，false是销毁dom）来实现组件的创建和销毁。而控制改变v-if的值我们通过一个监听按钮点击事件的功能。

结果如下

屏幕快照 2019-07-07 下午2.08.56.png
屏幕快照 2019-07-07 下午2.09.01.png

上面是页面一开始渲染完成后，v-if为true时，输出台没有任何输出

屏幕快照 2019-07-07 下午2.09.10.png 屏幕快照 2019-07-07 下午2.09.15.png

上面是点击按钮后，v-if为false时，组件被销毁，输出台输出了销毁前和销毁后的两个信息。