浅谈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生命周期函数,这个钩子执行后,表示销毁已经完成。