vue生命周期图解

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们注册js方法，可以让我们达到控制整个过程的目的地

1. beforeCreated

在实例初始化之后，数据观测（data observer）和event、watch事件配置之前被调用
解释：这个时期，this变量还不能使用，在data下的数据，methods下的方法，watch中的事件都不能获取到

2. created

实例已经创建完成之后被调用，这一步，实例已经完成了以下配置：数据观测，属性和方法的运算，wach/event事件回调，然后挂载阶段还没有开始，$el属性不可见
解释：这个时候可以操作vue实例中的数据和各种方法，但是还不能对dom节点进行操作

3. beforeMount

在挂载开始之前被调用，相关的render函数首次被调用

4. mounted

 挂载完毕，这是dom节点被渲染到文档内，一些需要dom的操作在此时才能正常运行，通常是初始化页面完成后，在对html的dom节点进行一些需要的操作。
对于created和mounted来说，通常是created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作。例如better-scroll,必须在页面加载完成后才能调用滚动的方法。

5. beforeUpdate

数据更新时调用，发生在虚拟dom打补丁之前，这里适合在更新之前访问现有的dom，比如手动移出已添加的事件监听器

6. update

由于数据更改导致的虚拟dom重新熏染和打补丁，在这之后会调用该钩子
当这个钩子被调用时，组件dom已经更新，然而大多数情况下，应该避免在此期间更改状态，如果要相应状态改变，通常最好使用计算属性或者watcher取而代之

7. activated

keep-alive组件激活时调用，该钩子在服务器端渲染期间不被调用

8.deactivated

keep-alive组件停用时调用，该钩子在服务器渲染期间不被调用

9. beforeDestory

实例销毁之前调用，在这一步，实例仍然完可用，该钩子在服务器渲染期间不被调用

10. destroyed

veu实例销毁后调用，调用后vue实例指示的所有东西都会解绑，所有的事件监听器会被移出，所有的子实例也会被销毁