Vue生命周期总结

包含了8个生命周期钩子，也叫生命周期函数

beforeCreate( 创建前 )
使用这个钩子，组件的选项对象并没有创建，el和data都还没初始化，所以data、methods和computed等都用不了。一般用来在组件挂在之前渲染一些东西。

created ( 创建后 ）
这时候上面的data、methods、computed都已经创建完成了，数据观测，属性和方法的运算，watch/event事件回调都完成了，但这时候挂载阶段mount还没开始，是el并没有完成。这是最常用的生命周期钩子，可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也在这里发ajax请求，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter（路由守卫）中完成

beforeMount（挂载之前）
挂载之前被调用，render（渲染）函数首次被调用（虚拟DOM），这里已经完成了模板编译，data里面的数据和模板会生产HTML，这里el也完成了，但并没有挂载到html页面上。

mounted（挂载）
挂载完成了，这时候HTML模板会被渲染到HTML中，还可以做一些ajax操作。但mounted只能执行一次。

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

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

beforeDestroy（销毁前）
在实例销毁前调用，但实例还可以用。
这里还可以使用this，一般用来做重置操作，比如清除定时器和DOM监听事件。

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

大图解析