Vue生命周期

Vue 在 GitHub 上面的 star 数量已经超过了 react，虽然 npm 包下载的数量还没有 react 多，但是 Vue 上升的势头真的很猛。

Vue 生命周期 2.0 和 1.0 差别还是有一点的，生命周期的博客文章百度也是很多，今天我简单提一下生命周期，然后说一下一些可能比较没人注意的点。

先上 Vue 官网的生命周期图片：

先罗列出生命周期然后一个一个讲解

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

beforeCreate

实例组件刚创建，元素 DOM 和数据都还没有初始化，暂时不知道能在这个周期里面进行生命操作。

created

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

beforeMount

DOM 未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示 {{}}，这是因为 Vue 采用了 Virtual DOM（虚拟 Dom）技术。先占住了一个坑。

mounted

数据和 DOM 都完成挂载，在上一个周期占位的数据把值给渲染进去。可以在这边请求，不过 created 请求会更好一些。这个周期适合执行初始化需要操作 DOM 的方法。

beforeUpdate

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

updated

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

beforeDestroy

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

Destroyed

说实在的，我还真的不知道这个周期跟 beforeDestroy 有什么区别，我在这个周期里面调用 data 的数据和 methods 的方法都能调用，所以我会觉得跟 beforeDestroy 是一样的。