vue的生命周期

先上张官网图片：

vue的生命周期简单来说就是从创建组件开始然后到渲染组件最后销毁组件的一个过程。它分为以下几个钩子函数：

beforeCreate

实例组件刚创建，元素DOM和数据都还没有初始化，因此无法访问 methods， data， computed 等上的方法和数据。

created

数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染。在这个周期里面，请求因为是异步的，不会阻碍实例加载，除非是那些同步操走才会导致页面空白。这样说来，在这个周期里面进行请求，渲染速度反而会更快。

beforeMount

DOM未完成挂载，数据也初始化完成，注意此时还没有挂在 html 到页面上。

mounted

数据和DOM都完成挂载，mounted 只会执行一次。可以在这边请求，不过created请求会更好一些。这个周期适合执行初始化需要操作DOM的方法。如果在这个函数里面请求数据的时间太长的话会导致白屏的问题。

beforeUpdate

只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。

updated

只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。

beforeDestroy

这个周期是在组件销毁之前执行，我觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。

Destroyed

这个周期是在组件销毁之后调用，调用后所有的事件监听都会被移除，子实例也会被销毁。