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钩子函数，一个实例的生命周期结束。

转载于:https://juejin.im/post/5cfb9af0f265da1b802037a1