04 Vue项目中一旦需要切换路由你立刻要想到的几个问题点

经海路大白狗

已于 2023-07-25 11:12:11 修改

阅读量3.3k

点赞数 28

分类专栏： Vue + SpringBoot前后端分离项目实战文章标签： vue.js 前端 javascript

于 2023-04-18 22:09:13 首次发布

本文链接：https://blog.csdn.net/xingyu_qie/article/details/130232249

版权

Vue + SpringBoot前后端分离项目实战专栏收录该内容

20 篇文章 19 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

在Vue项目中，切换路由时应注意销毁钩子function、DOM对象处理、定时器清理及console.log使用。本文讨论了为什么不在不需要时定义destroyed钩子，如何处理已获取的DOM对象，何时清除setTimeout和setInterval，以及避免过度使用console.log，以防止内存泄漏和性能影响。

摘要由CSDN通过智能技术生成

前言

这是Vue实战项目的第11篇博客啦，上一节我们新定义了一些路由数据，通过el-menu开发了左侧菜单功能，然后又自研了tg-menu组件，之前也把项目的整体模板架构搭建起来了。这一节主要是说一个项目实战中的一个要点，就是切换路由的时候，你需要立刻想到的几个问题点。

我们比较习惯于用Vue开发单页面应用，意思就是我们所看见的所有页面，其实就一个HTML落地页面，通过主文件main.js和主入口组件app.vue，外加vue-router等方式将所有内容组合起来。所以，其实整个项目是一个大的Vue组件，像是一棵大树，app.vue是树干，细枝末节的小组件非常多。即便是切换了路由，看见的内容不同了，但整体组件却还是这个大的Vue组件。

所以，在切换路由的时候，虽然有些页面内容看不见了，但他的所属组件可能定义了一些全局变量或者函数，还在内存中，这个时候，就要注意，在你切换掉的前组件中，有哪些东西却依然存在，影响着我们当前的组件。

前言

1. destroyed钩子函数是否需要定义

2. 获取过dom对象

3. setTimeout和setInterval的置空

4. console.log少用或不用