浅谈vue生命周期

生命周期有8个函数（钩子）：

1. beforeCreate 创建前

在实例初始化之后，数据观测（data observer）和 event/watch事件配置之前被调用

一般这个时候，对象还没有创建，组件还没有挂载，data等还没有初始化，一般用来在组件挂载前渲染一些东西

 

2.Created 创建完成

在实例创建完成后立即被调用，在这一步实例已经完成了：数据观测、属性和方法的运算和 event/watch事件的回调，但是$el属性目前不可见。

这时候上面的data、methods、computed都已经创建完成了，可以调用methods中的方法，改变data中的数据

 

3.beforeMount 挂载前

在挂载开始之前被调用

挂载之前被调用，render（渲染）函数首次被调用，但还没有渲染到页面上

 

4.mounted 挂载完成

在挂载成功后被调用，el被新创建的vm.$el替换

挂载完成了，这时候HTML模板会被渲染到HTML中。但mounted只能执行一次。

 

5.beforeUpdate 更新前

数据更新之前调用

更新指数据更新，发生在虚拟DOM重新渲染之前，在这个钩子中可以更改状态而不发生重绘。

 

6.updated 更新完成

数据更新完成时调用，组件dom已经更新

调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

 

7.beforeDestroy 销毁前

组件销毁前调用

在实例销毁前调用，一般用来做重置操作，比如清除定时器和DOM监听事件。

 

8.destroyed 销毁完成

组件销毁后调用

在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

 

keep-alive中的生命周期：

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

*只有当组件在<keep - alive >内被切换，才会有activated示deactivated这两个钩子函数 

1.activated

组件被激活时调用

 

2.deactivated

组件被移除时调用