vue全家桶-vue生命周期

vue的生命周期其实很好理解，它就是一个vue实例从创建到销毁的一个过程。

我们先来看一下官网给的vue生命周期图谱

从图上可以很轻易看到vue的生命周期由8个钩子分成了8个阶段

beforeCreate:创建前

created：创建后

beforeMount：载入前

mounted： 载入后

beforeUpdate ：更新前

update： 更新后

beforeDestroy ： 销毁前

destroyed ：销毁后

 

别人介绍都喜欢用demo，我感觉还是来说说吧，就不用demo了

1.beforeCreate

在这个阶段，你应该刚new了个vue的实例，这时实例中的el、data等都是undefined，也就是说全是空，因为还没挂载值

2.created

到了这个阶段，数据已经绑定到你的实例上了，这时你可以进行初始值的获取，但是不会触发到下面的钩子。而el依然为空，因为还没开始挂载对象

3.beforeMount

在这里，应该已经找到了el对象，如果没有找到，那么实例的生命周期到这就已经停止了。

如果找到了el对象，那么虚拟DOM在这也就创建完成了，并进入render等待渲染。在这，你可以和created阶段一样，获取初始值，也依然不会触发下面的钩子。

4.mounted

在这个阶段，虚拟DOM已经被转换为真实DOM渲染到了页面中，这时你就可以进行DOM操作了。

5.beforeUpdate

一旦你进行了数据更改，beforeUpdate就会立即执行，它会重新创建虚拟DOM，准备重新渲染。

6.updated

到了这，页面的重新渲染已经完成了，可以继续进行DOM操作。

7.beforeDestroy

在这一步的时候，实例依然存在并且有效。

8.destory

到了这，该实例的所有东西都会解除绑定，事件也都移除，再次成为一个空的实例。

vue的生命周期就这些，内容不多，但用起来依然要踩很多的坑。

像选择在什么时候获取初始值，什么时候更新数据，依然需要自己的判断。坑这东西，多踩踩自然就平了。