vue生命周期

关于vue中的生命周期，其实在刚开始接触vue的时候就有了解过，但一直都是一知半解的，最近又有用到，所以就借此机会总结一下。

项目准备

为了简化操作，这里只是总结生命周期函数，所以是直接在App.vue中进行操作的，只是为了需要，在src文件目录下新建了一个components文件夹，用来存放组件，并在该文件夹下面新建了一个组件children.vue。具体如下：

beforeCreate & created

为了测试这两个函数，首先在子组件childred.vue中添加一个数据，分别在两个函数中打印该数据。

通过上面的打印，我们可以得出以下结论：

1. 只要使用组件，就会触发上面两个事件函数；
2. created中可以操作数据，并且可以实现vue到页面的影响，也就是说，在created阶段就可以发起Ajax请求。

beforeMount & mounted

继续对子组件children.vue进行操作：

 

通过上面的打印，我们不难发现，在进行数据装载之后，就是vue作用以后的DOM。

beforeUpdate & updated

与上面的生命周期函数不同的是，上面的函数是组件调用时自然会发生的，但这两个函数的发生基于数据改变对页面的影响，分别获取改变发生前的DOM和改变发生后的DOM。所以为了演示这两个函数，这里在子组件中添加了一个数据，并通过按钮的点击事件开改变该数据的值，从而触发这两个生命周期函数。

需要注意的是，beforeMount和mounted也能获取DOM，但是这两个是分别获取vue启动前和启动后的DOM，并且只会执行一次，而beforeUpdate和updated则是获取页面改变前后的DOM，可以根据多次的页面改变而触发多次。

beforeDestroy & destroyed

 这两个函数对应的是子组件在组件中销毁（v-if = false）时触发的函数，所以需要在父组件中添加点击事件控制子组件的创建和销毁，从而触发这两个函数。

父组件：

在页面加载完成后，会触发创建的两个函数，当点击按钮，不停的销毁创建子组件的时候，就会频繁触发销毁创建函数。

我们知道，当我们频繁对DOM进行操作的时候，会加大损耗，这是不允许的，所以现在在上面的例子的基础上，在父组件调用子组件的时候，在外层加上一个内置组件：

此时，在页面加载过程中，会触发创建的连个函数，但是当我们点击按钮的时候，虽然页面上有变化，但是并没有打印，也就是并没有继续触发销毁和创建。

 

这是因为在没有使用keep-alive组件的时候，v-if触发的是子组件的创建和销毁，当使用了keep-alive的时候，v-if触发的子组件的激活和停用，那么既然页面有变换，但是没有触发销毁和创建函数，那我们怎么知道显示和隐藏的变化呢，这就是接下来要说的两个函数了。

activated & deactivated

这两个函数就是在组件被激活和停用是触发的，保持上面的父组件不变，稍微修改子组件如下：

然后点击按钮，控制组件的显示和消失的时候，我们就可以看到相关函数的打印结果了。

 

在实际的运用过程中，如果需要不停的对子组件进行显示隐藏操作的时候，频繁的创建销毁是不被推荐的，此时就可以借助于keep-alive组件和组件的激活停用来实现功能。