【Vue学习总结】11.Vue中组件的生命周期函数

接上篇《10.vue组件的使用》

上一篇我们主要讲解了vue组件的使用。本篇我们来讲解vue的组件的生命周期函数。
本系列博文使用的Vue版本：2.6.11

一、什么是生命周期函数

在vue里，生命周期函数就是组件挂载、更新和销毁时触发的一系列的方法，因为是在组件的各个生命周期发生时调用的回调方法，所以生命周期函数又被称为“生命钩子函数”。

vue提供生命周期函数的目的，就是使开发人员可以在组件不同的阶段有添加代码的机会。

之前我们在前年的博文中使用过其中一个生命周期函数，名为"mounted"，该函数是将已经编译好的模板，挂载到页面指定的容器中显示时回调的函数。

vue提供了beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed这些生命周期函数，具体的作用和区别见下表：

下面是各个生命周期在执行过程中的位置：

二、演示各个生命周期函数

我们在原来的工程上新建一个组件，名为“Life.vue”：

然后在原来的HelloWorld.vue中引入这个组件，并注册：

然后回到Life.vue中编写我们的业务逻辑：

这里的效果就是，在访问该页面的时候，在div区域显示的是原始msg的内容“我是一个生命周期函数的组件”，然后点击“执行方法改变msg”的按钮后，该区域的值变为“我是改变后的数据”：

我们就在该例子中，编写生命周期函数，来看看各个钩子函数的执行时机。我们将各个生命周期函数编写进去：

首先直接刷新页面，在浏览器控制台可以看到：

然后我们点击“执行方法改变msg”的按钮，可以看到触发了beforeUpdate和updated函数：

我们在HelloWorld.vue里引入了life.vue组件，我们在HelloWorld.vue里编写一个按钮，来挂载和卸载life.vue组件，以便演示组件销毁的效果：

在上面的代码中，我们定义了一个布尔参数，默认为true。在life组件的标签增加一个显示条件，当flag为true的时候加载该组件。下面添加一个button按钮，点击按钮来改变flag的值，进而控制组件的加载。

下面我们分别点击两次“挂载以及卸载life组件”的按钮，可以看到生命周期函数打印的信息：

以上就是vue组件的声明周期函数，后面在学习其它知识的时候会经常用到，到时会更熟悉。
下一篇我们来学习使用vue-resource来请求数据。

参考：
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》

转载请注明出处：https://blog.csdn.net/acmman/article/details/108696849