vue里的生命周期总结

开始

能够熟练的使用vue的生命周期，可以更加深入的写出父子组件，和减少代码的复杂度。一般说生命周期分两部分：1.只有父组件，不含子组件。2.含有父子组件的代码。

一，只有父组件

1. beforeCreate —实例创建之前，data，methods，computed等实例上的方法和属性都不可以获取调用
2. created —实例创建完成，数据已观测，可以调用，修改，但是不会触发update，因为没有渲染
3. beforeMount —虚拟dom挂载之前，虚拟dom创建完成，即将渲染
4. mounted —挂载完成，可以操作dom
5. beforeUpdate —组件数据更新之前调用，数据都是新的,页面上数据都是旧的 组件即将更新,准备渲染页面（Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。）
6. updated—组件更新后 ： render重新渲染 ，不能在此更新数据，不然会无限循环更新
7. beforeDestroy—组件卸载前 : 实例销毁之前，在当前阶段实例完全可以被使用
8. destroyed—组件卸载后 ： 组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
   

二，含有父子组件

1.上面已详细简述了每个阶段要做什么，其实核心就是dom的渲染和销毁过程。父子组件都要经过vue实例创建，dom渲染挂载，销毁，而子组件又是嵌套在父组件的HTML中，那么 beforeCreate(父）=>created(父)=>beforeMount(父)–子组件a渲染成功，子组件b渲染成功…–=>mounted(父) 渲染成功，初始化完成。

2.beforeUpdate和updated数据更新阶段，父子组件，只要数据不相互影响就相对独立。那个组件数据变化那个就处于本阶段。
3.销毁阶段：beforeDestroy–父 =>beforeDestroy–子=>destroyed–子=>destroyed–父。一样组从dom销毁流程，可以看成初始化的逆流成。

三，其他周期

1.缓冲页面（keep-alive:true）

初次进入页面
beforeRouteEnter（next()外） → beforeCreate → created → beforeMount → beforeRouteEnter( next()内 ) → mounted → activated → (离开页面时): beforeRouteLeave → deactivated
再次进入页面
beforeRouteEnter( next()外 ) → beforeRouteEnter( next()内 ) → activated

对比created和mounted阶段调用后端接口

1.首先，created确实是早了，但是早不了几微秒，所以这其实没有提高性能
2.其次，我们在created阶段并没有去做渲染，所以在接下来我们会去做Dom渲染，但是如果此时我们还做了Ajax操作，在Ajax结束之后就会返回数据，我们就会将其插入到主线程中去运行，去处理数据，但是我们要知道，在浏览器机制中，渲染线程跟js线程是互斥的，所以有可能我们做渲染的同时，另一边可能要处理Ajax返回的数据了，这时候渲染就有可能被打断，在处理完数组后，去进行重新渲染。 那如果在created中有多个Ajax呢？我们又要重新进行渲染，所以在created去做Ajax请求这明显不太合适。
3.还有，有的时候我们接到返回的数据的时候可能要在回调函数中去进行一些Dom的操作，可是created阶段我们还没有将真实Dom加载出来，所以相对而言我们还是在mounted去调用要好一些