上一个程序员提桶跑路了，我接手后用这些方法优化了项目

例外小弟还有个程序员交流群，欢迎各位大佬来摸鱼哈。点击加群

平常我们在开发和维护项目的过程中，如果我们跑的项目有点大啊，或者数据太多，导致项目跑起来弊蜗牛还要慢，然后用户体验还不友好，对于新手程序员来说！老板天天都要你加班改！你还不敢辞职！这种时候，就很让人头痛了，怎么办！

但是！也不是没有办法的！骚年！你当时学vue的时候可不是这样说的！

接下来我来给你浓重介绍几个优化性能的小技巧，让你的项目蹭蹭蹭的飞起来！老板看了都直呼内行！

1.v-if和v-show的使用场景要区分

v-if

v-if是条件渲染，当条件满足了，那肯定是渲染哇!如果你需要设置一个元素随时隐藏或者消失，然后用v-if是非常的浪费性能的，因为它不停的创建然后销毁。

但是它也是惰性的，如果你开始一给它条件为 false，它就害羞不出来了，跟你家女朋友一样天天晚上都不跟你回家，甚至你家里都没有你女朋友的衣物！然后结构页面里也不会渲染出来，查不到这个元素，不知情的朋友以为你谈了个虚拟女友，直到你让它条件为 true ，它才开始渲染，也就是拿了结婚证才跟你回家。

v-show

v-show就很简单，他的原理就是利用 css 的 display 的属性，让他隐藏或者出现，所以一开始渲染页面哪怕我们看不到这个元素，但是它在文档的话，是确确实实存在的，只是因为 display：none；隐藏了。

就像是你的打气女朋友，平常有人你肯定不敢打气哇！肯定是等夜深人静的时候，才偷偷打气，然后早上又继续放气藏起来，这样是不是很方便咧！所以这个元素你也就是你打气女朋友每天打气放气，是不是也没有那么费力咧！白天就可以藏起来快乐的上班啦！

好啦划重点啦！不要瞎想什么女朋友了，女朋友只会影响我码项目的速度！

所以这样看来，如果是很少改变条件来渲染或者销毁的，建议是用 v-if ，如果是需要不断地切换，不断地隐藏又出现又隐藏这些场景的话， v-show 更适合使用！所以要在这些场景里合适的运用 v-if 和 v-show 会节省很多性能以达到性能优化。

2.v-if和v-for不能同时使用 (vue2和vue3的v-if和v-for优先级不同）

首先我们来看一下在vue2中！

当v-if与v-for一起使用时，v-for比v-if更高的优先级。这样就意味着v-if将分别重复运行于每一个v-for循中，那就是先运行v-for的循环，然后在每一个v-for的循环中，再进行v-if的条件对比，会造成性能浪费，影响项目的速度。

然后我们来看一下在vue3中

我的个人见解就是，当我是用ifshow的值来判断v-if它是有效的，说明在vue3中v-if优先级高于v-for，但是我如果是用要循环的值flag来判断，页面没有给我返回什么，如果是有大佬给我解答我会虚心受教，但是我还是喜欢用计算属性o(￣▽￣)o

当你真的需要根据条件渲染页面的时候，建议是采用计算属性，这样及高效且美观，又不会出问题，如下面的代码展示

3.computed和watch使用要区分场景

先看一下计算属性computed，它支持缓存，当依赖的数据发生变化的时候，才会重新计算，但是它并不支持异步操作，它无法监听数据变化。而且计算属性是基于响应式依赖进行缓存的。

再看一下侦听属性watch，它不支持缓存，它支持异步操作，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是和computed最大的区别。

所以说，如果你的需求是写像购物车那种的，一个属性受其他属性影响的，用计算属性 computed 。 就像是你家的二哈，你不带它出去玩，你一回家就发现你家能拆的都被二哈拆掉了，因为你不带它出去跟你女朋友逛街！

如果是像写那种像模糊查询的，可以用侦听属性 watch ，因为可以一条数据影响多条数据。 比如你双12给你女朋友买了很多东西，那双十二之后，是不是很多机会回不去宿舍咧！

用好这两个，可以让你的代码更加高效，看起来也更加简洁优雅，让项目蹭蹭跑起来！这样都是一种优化性能的方式！

4.路由懒加载

当Vue项目是单页面应用的时候，可能会有很多路由引入 ，这样的话，使用webpcak打包后的文件会非常的大，当第一次进入首页的时候，加载的资源很多多，页面有时候会出现白屏的情况，对用户很不友好，体验也差。

但是，当我们把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就很高效了。会大大提升首屏加载显示的速度，但是可能其他的页面的速度就会降下来。有利有弊吧，根据自己业务需求来使用，实现效果也非常的简单，在router的index.js文件下，如下所示

打开浏览器运行，当我没有点击进入about组件的时候包的大小就如蓝色框住的那些，当我点击了about组件进入后，就增加了后面红色圈住的包，总的大小是增加了**