Vue的生命周期

Vue生命周期图解

vue在我们写项目的时候，还有要想解决bug的时候，是必须要借助生命周期去进行的。Vue的生命周期总结为：创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁

下面咱们用最容易理解的方式，去记住Vue的生命周期

1. beforeCreate —>在这一步要做的就是初始化事件，对数据进行观测，数据和data还没有绑定；
2. created —> 在这一步的时候数据就已经和data进行绑定了，但是el还没有挂载；
3. beforeMount —> 如图，在这一阶段，首先会判断对象是否有 el 选项（option）。如果有的话就继续向下编译；如果没有则停止编译，也就意味着停止了生命周期，直到在该 Vue 实例上调用 vm.$mount(el);
4. mounted —> Dom已经完成了挂载；
5. beforeUpdate 和 updated 之间的生命周期 —> 当 vue 中的数据发生变化的时候，会触发对应组件的重新渲染（re-render），先后调用 beforeUpdate 和 updated 钩子函数；（这两个钩子都是在data改变之后才触发的，但是区别在于，beforeUpdate 是在页面重新渲染之前，updated 是在页面重新渲染之后）；
6. beforeDestroy 和 destroyed 之间的生命周期 —> beforeDestroy 是在实例被销毁之前调用，在这一步，实例仍然完全可以调用。
   destroyed 函数在实例被销毁之后调用，此时 vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。
   至此常用的vue生命周期就算完了，虽然还有两个activated、deactivated两个生命周期，但是他们用的很少，如果有需要的伙伴可以自动动动发财的小手去解决这个问题。
   好了，大家继续努力加油吧！