（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的生命周期就讲解完了。
网友评论