chaihongjun.me

Vue2路由的切换实质是 Vue 组件的销毁和创建，从一个组件切换到另外一个组件，类似于销毁一个组件再创建另外一个组件并挂载，而这里细节涉及到组件的创建，挂载，更新和销毁等生命周期钩子。

这里结合实例观察：

//App.vue 父组件




// 子组件之一



// 另外一个子组件

页面启动初结果：

当鼠标点击About页面的时候，控制台又输出：

可以看出，路由的切换近似于一个组件的销毁和另外一个组件的挂载。当然，旧组件被销毁之前要经历创建，挂载，更新等生命周期，新的组件也同样经历。大体上的阶段相似并且钩子是相近连续的，只不过在最后阶段，新组件在准备挂载和完成挂载期间执行的是旧组件最后的销毁阶段。

另外，当页面发生改变会触发update的相关生命周期钩子函数。