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

前言

这是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少用或不用

最后吐槽一下

---

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

我们都知道这个生命周期是组件销毁时候需要执行哪些事情。例如，我们有个a路由，需要跳转到b路由去了，这个时候，a组件会执行destroyed的声明周期函数。而我们很多人喜欢在自己的业务组件把钩子函数都写全，以备不时之需，而且一旦你写上destroyed() {} 这个钩子后，他就会执行。试想一下，如果你每次出门的时候，都对着墙说一句我要出门了，感觉如何？所以，如果此业务组件内没有特别需要组件销毁时移除的变量，就不要定义这个销毁钩子函数。

2. 获取过dom对象

比如我们项目全局顶部有一行字，当路由切换到a组件的时候，我们希望它变为红色，其他组件的时候都是蓝色。那么最简单的办法就是在a组件的created钩子内，let txtDom = document.querySelector(‘.txt); 然后 判断txtDom如果存在就设置txtDom.style.color = ‘red’;而a组件即将被切换走的时候，也就是在destroyed函数内再将txtDom.style.color 置为blue。

但由于Vue项目时常遇见数据绑定赋值与组件响应不同步的情况，又或者说js本身与DOM元素产生连桥就会有时间消耗的原因，这个txtDom的获取并非百发百中，一旦涉及到获取DOM元素，紧接着就要判断一下 if (txtDom)，而destroyed这个钩子函数呢，记住一定是这样子的

created() {
    let txtDom = document.querySelector('.txt');
    if (txtDom) {
      txtDom.style.color = 'red';
    }
  },
  destroyed() {
    let txtDom = document.querySelector('.txt');
    if (txtDom) {
      txtDom.style.color = 'blue';
    }
  },

3.  setTimeout和setInterval的置空

我们一般会用setInterval做定时任务，比如做个值的累加，做个倒计时啥的，而慢慢人们发现setInterval对内存的消耗后，开始用setTimeout加递归替代掉setInterval，比如做个三秒请求一次某接口。

当路由别切换走了之后，setTimeout代码段生成的是全局的函数，意思就是即便路由切换走了，这个代码段还在执行。你可以看到，浏览器netword里还在一直请求接口，所以在a组件的destoryed内，就要对这些全局的函数做一个置空处理，而且一定要做。

除此之外，不小心定义的一些全局变量也是要注意的

4. console.log少用或不用

你是否觉得console.log是一个人畜无害的好代码，而且不管Vue项目路由怎么切换，这个console.log代码段打印的信息都可以一直保留在浏览器的控制台，很方便，而且上线了还能时不时看看我们开发时候打印的东西，的确是挺方便的。

你是否也曾听到组长的指示说，上线的时候把代码里的console.log代码都给我去掉啊，为了啥，美观？怕信息泄漏？怕外人觉得我们团队不专业？可能这些情况都有吧。

我今天想说的是，如果你单纯是打印一下例如console.log一个常量，例如’123’ ‘我是经海路大白狗’到还好，但如果你打印的是一个数组啦，对象啦的，就不太好。因为这些堆内存里的东西，一旦被console.log后，相当于又重新定义了一个变量，去引用了这个对内存中的变量。我们知道，一旦内存中的变量被引用后，就不能被释放了。

本来随着组件销毁，这个存在堆内存的对象是有可能跟着被销毁的，但是经过console.log一执行，他就不会被销毁，一直留在内存中。而且Vue项目有个特点，不断切换路由但是页面并没有刷新，对吧。

最后吐槽一下

其实也不光是Vue项目，不管是之前的jq项目，还是react项目，技术栈本身是没有问题的，正是我们的项目被不同的人触碰过，被更多的人改了一半又来了一个人又接着改，久而久之，就像是一坨闪闪发光的shi，谁碰谁开心到不行。也正是有更多的出类拔萃的开发者，他非要看别人这么写，觉得不符合自己的优秀作风，就要别具一格，又久而久之，你看着项目在跑着，其实谁也不知道哪天就跑不动了。