之前我有写过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的更新完成。