(1)我们先看一下vue官网给出的生命周期图,如下:
(2)从图中,我们可以看出,每个组件或者实例的一个完整生命周期大致可以划分为三个阶段:初始化,运行中和销毁。
(3)组件或者实例通过new Vue()创建后,便会初始化事件和生命周期,会自动执行beforeCreate这个钩子函数,但此时无法访问到数据可以真实的dom,因为这时的数据还没有挂载,只是一个空壳。
(4)之后就到了created钩子函数,这时数据已经挂载了,可以访问到数据,同时也可以更改数据,但是不会触发updated函数。
(5)Created()之后,经过了一系列的判断之后,将编译模版放入render函数中准备渲染,执行beforeMount钩子函数,此时虚拟dom已经创建完成,在这里还是可以更改数据的,同样不会触发updated函数,但是这个渲染前的最后一次更改数据的机会了。
(6)接下来开始render,渲染出真实的dom,然后执行mounted钩子函数,此时组件已经挂载完毕,出现在页面中了,此时数据和真实dom和事件都可以进行操作了。
(7)当组件或实例的数据有改动,会立即执行beforeUpdate钩子函数,然后vue会从新构建新的虚拟dom,并且与旧的虚拟dom利用diff算法进行比较之后进行重新渲染。
(8)当(7)更新完,就会执行updated钩子函数,数据就完成更改,新的dom也随机render完成,此时可以对更新后的dom进行操作了。
(9)当调用$destroy函数后,会立刻执行beforeDestroy钩子函数,但在这一步中实例仍热完全可用。
(10)然后到了destroyed这一步,被调用后,对应Vue实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
至此,一个完整的vue的生命周期就讲解完了。