浅谈Vue的生命周期

浅谈Vue生命周期

• 首先，什么是生命周期？

从new Vue 实例被创建再到销毁的整个过程，称为Vue的生命周期。

我们先从官网上了解一下Vue的生命周期图示：

首先，从图上，我们可以了解到的过程为：

• 首先是new Vue()实例化vue时，初始化事件与生命周期。这个过程分别调用了三个初始化函数：initLifecycle()、initEvents()、initRender()，这三个函数我们在这里就不深入解析了。

• 执行beforeCreate生命周期函数，执行完成后，会开始数据的初始化，这个过程，会定义data数据，方法以及事件，并且会完成数据劫持Observe以及Watcher观察者实例。这样才会在数据变化的时候在之后的生命函数钩子中渲染DOM

• 执行cteated生命周期函数，执行完成后，判断是否有el参数，如果没有：等待调用$mount（el）方法、如果有：判断是否有template模板，如果有：直接将template转换成render（）函数，如果没有：直接获取到上面的el编译成template，然后再将这个template转换为render（）函数。总之一句话：在cteated与下面的beforeMount之间主要完成的是将template转化成render（）函数。

• 执行beforeMount生命周期函数，在这个钩子执行后，要对上面的render（）函数进行渲染，首先我们会渲染出一个虚拟的DOM，这个虚拟的Dom的作用就是：当数据发生变化的时候，也会生成一个新的虚拟Dom，新老Dom进行对比计算。之后对这个虚拟的DOM进行保存，之后再将render渲染成真正的DOM。

• 执行mounted生命周期函数，并且将生命周期的表示属性_isMounted设置为true，这个属性我们不做深入了解。所以在mounted中，我们可以操作DOM，因为这个时候DOM已经渲染完成。

• 执行beforeUpdate生命周期函数，这个钩子调用后，又会生成一个新的虚拟DOM，拿这个新的虚拟DOM与老的虚拟DOM进行diff算法比较，算出最小的更新范围，从而范围更新render（）函数中的数据。再将更新后的render（）函数生成虚拟DOM，在将真实的DOM渲染出来，就完成了数据的更新。

• 执行updated生命周期函数，这个过程中也是和mounted一样，可以操作DOM。

• 执行beforeDestroy生命周期函数，实例销毁之前，也就是说，现在还可以操作DOM。在执行完成后，会做一系列的销毁动作——解除数据引用、移除监听事件、删除组件等等。

• 执行destroyed生命周期函数，这个钩子执行后，表示销毁已经完成。