---
title: Vue2路由切换组件的生命周期变化
description: Vue2路由的切换实质是 Vue 组件的销毁和创建，从一个组件切换到另外一个组件，类似于销毁一个组件再创建另外一个组件并挂载，而这里细节涉及到组件的创建，挂载，
author: chaihongjun
category: frontend
published: 2024-12-02
url: https://chaihongjun.me/frontend/33.html
---

# Vue2路由切换组件的生命周期变化

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

这里结合实例观察：
MDBLOCK0
页面启动初结果：

![Vue2路由切换组件的声明周期变化](https://chaihongjun.me/public/uploads/images/20241202/1733119709454571.jpg)

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

![Vue2路由切换组件的声明周期变化](https://chaihongjun.me/public/uploads/images/20241202/1733119933429912.jpg)

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

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

---

> 本文首发于 [chaihongjun.me | 柴宏俊 web 技术学习笔记](https://chaihongjun.me/frontend/33.html)，采用 CC BY-NC-ND 4.0 协议，转载请保留出处与链接。