vue带路由的生命周期详解

引言

之前我有写过vue生命周期详解，但这个是最简单的不用vue-cli直接script引入vue.js的生命周期分析。其实也就是单个vue实例的生命周期。
为了想清楚带路由的vue项目中生命周期，我就根据官网搭建了一个基于webpack模板的vue项目，具体见vue的单组件与路由，这里面描述了我怎么对初始项目的修改，实现了下面这个页面。（一个简单的很丑的页面）。如果不是想自己实现，只是看看生命周期过程的话就看下面分析即可。

简单说明

打开如图

点击’列表页‘

简单说明一下

home也是这个结构

然后还要注意，在项目中，main.js里new了一个vue实例，它里面有着App组件实例，App组件里有Home/List组件实例（根据路由决定是哪个），是一层包着一层的关系。随后我在这几个实例中都把8个钩子函数console出来。

具体分析

刚打开页面

放大

可以看出main->app>home一层一层经历beforeCreate,created,beforeMount钩子函数，然后又从home->app>main.js经历mounted挂载上。
当我们点击’列表页‘

放大看

APP里的home组件变为list组件，app更新。开始list初始化经历beforeCreate,created,beforeMount钩子函数。然后home才开始卸载状态。这里是先准备list再卸载home，比喻一下，就像有的人先开始找备胎（list beforeCreat等等)，再和男朋友说分手（home beforeDestroy)，分完手(home destroyed)，备胎上来（home mounted）。然后app的更新完成。