Vue生命周期图示解析

前言

最近开始在看Vue的内部原理，之前在使用Vue的时候最让我有点迷糊就是它教程里面那个生命周期图示，虽然咱们在入门的时候并不须要知道周期中每一个钩子函数具体是什么时机触发了，可是应用到项目中，就会由于一个时机问题致使一个意想不到的结果，恰好看到了这个部分，所以作个记录。

生命周期图示 - 官方图示

下面是中文对照图：

初始化阶段具体作了什么详情请看下图：

Vue的构造函数里只作了一件事情，那就是调用_init函数，而_init函数是在initMixin里挂载上去的，具体能够去查看Vue.js源码，在src/core/instance/index.js目录底下，从这里能够看到执行了五个函数initMixin、stateMixin、eventsMixin、lifecycleMixin、renderMixin，这几个函数作了什么，下图作了一个简单的总结：

从执行new Vue()开始发生了什么，能够很轻松的从初始化阶段那张图观察出来（图中标注未知和猜想字样的暂时还未了解到）。从图中还能够很清楚的知道，在执行beforeCreate钩子函数的时候，咱们在单文件组件里面声明的data、props、methods等选项还不能经过实例直接访问到，到了created阶段才可以访问到。 编译阶段也就是模板编译阶段，在这个过程当中解析器会将模版解析成AST语法树，而后经过遍历AST语法树生成代码字节码，最终生成render函数，render函数生成vnode，而后vnode转化为真实的dom。当页面呈如今用户面前时表明模板编译阶段、挂载阶段都已经完成，而beforeMount钩子在生成render函数以后就会调用，随后会进行渲染操做，渲染结束以后就会调用mounted钩子函数。 卸载阶段会先执行beforeDestroy钩子函数，等执行beforeDestroy钩子函数后会将_isBeingDestroyed标记为true，表示该实例正在卸载中，防止后面屡次调用$destroy，由于在执行beforeDestroy钩子函数以前会先判断_isBeingDestroyed是否为true，若是为true则直接返回。将_isBeingDestroyed标记为true后，会前后切断与父组件的联系、卸载全部watcher（包括_wather和_wathers全部wather实例，_wather是在组件初始化过程当中生成的全部wather，_wathers使用户建立的全部watcher）、标记_destroeyed为true、触发vnode树上的destroy钩子函数、触发用户声明的destroyed钩子函数，一个实例的生命周期结束。