作者小三是刚刚毕业不久全栈工程师，写的技术文章基本上是学习过程中笔记整理而来，大家看了之后如果喜欢可以给小弟点点赞哦。

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

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

但是！也不是没有办法的！骚年！你当时学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的条件对比，会造成性能浪费，影响项目的速度。

<template>
  <div id="app">
    <div id="nav">
      <div v-for="item in list" v-if="item.flag" :key="item">
        {{ item.color }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          color: "red",
          flag: true,
        },
        {
          color: "green",
          flag: false,
        },
        {
          color: "blue",
          flag: true,
        },
      ],
    };
  },
};
</script>

然后我们来看一下在vue3中

<template>
  <div id="nav">
    <div v-for="item in list" v-if="ifshow" :key="item">{{ item.color }}</div> 
    <div v-for="item in list" v-if="item.flag" :key="item">
      {{ item.color }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ifshow: true,
      list: [
        {
          color: "red",
          flag: true,
        },
        {
          color: "green",
          flag: false,
        },
        {
          color: "blue",
          flag: true,
        },
      ],
    };
  },
};
</script>

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

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

<template>
  <div id="app">
        <div v-for="item in newList" :key="item">{{item.color}}</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
       list:[
            {
                color:"red",
                flag:true
            },
            {
                color:"green",
                flag:false
            },
            {
                color:"blue",
                flag:true
            },
        ],
    }
  },
  computed:{
    newList(){
      return this.list.filter(list => {
        return list.flag
      })
    }
  }
  }
</script>

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

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

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

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

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

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

4.路由懒加载

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

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

import Home from '../views/Home'

const routes = [
 {
  path:'/home',
  name:"Home",				//这里没有用懒加载
  component:Home
 },
 {
path:'/about',
name:'About',
component:()=>import(/*webpackChunkName:"about"*/ '../views/About.vue')  //这里用了懒加载
 }
]

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

所以，使用路由懒加载可以降低首次加载的时候的性能消耗，但是后面打开这些组件可能会有所减慢，建议是如果体积不大的又不用马上展示的页面可以使用路由懒加载降低性能消耗，从而做到性能优化！

5.第三方插件按需引入

比如我们做一个项目，如果是全局引入第三方插件，打包构建的时候，会将别人整个插件包也一起打包进去，这样的话文件是非常庞大的，然后我们就需要将第三方插件按需引入，这个就需要自己去根据每个插件的官方文档在项目配置，始终就是一句话，用什么引什么！

6.优化列表的数据

当我们遇到哪些，一开始取的数据非常的庞大，然后还要渲染在页面上的时候，比如一下子给你传回来10w条数据还要渲染在页面上，项目一下子渲染出来是非常的有难度的。

这个时候，我们就 需要采用窗口化的技术来优化性能，只需要渲染少部分的内容（比如一下子拿多少条数据），这样就可以减少重新渲染组件和创建dom节点的时间。可以看看下面代码

<template>
  <div class="list">
    <h3>列表的懒加载</h3>
    <div>
      <div v-for="item in list">
        <div>{{ item }}</div>
      </div>
    </div>
    <div>
      <div v-if="moreShowBoolen">滚动加载更多</div>
      <div v-else>已无更多</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'List',
  data() {
    return {
      list: [],
      moreShowBoolen: false,
      nowPage: 1,
      scrollHeight: 0,
    };
  },
  mounted() {
    this.init();
    // document.documentElement.scrollTop获取当前页面滚动条的位置,documentElement对应的是html标签,body对应的是body标签
    // document.compatMode用来判断当前浏览器采用的渲染方式,CSS1Compat表示标准兼容模式开启
    window.addEventListener("scroll", () => {
      let scrollY=document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离
      let vh=document.compatMode === "CSS1Compat"?document.documentElement.clientHeight:document.body.clientHeight; // 页面的可视高度
      let allHeight = Math.max(
        document.body.scrollHeight,
        document.documentElement.scrollHeight
      ); // 整个页面的高度
      if (scrollY + vh >= allHeight) {
        // 当滚动条滑到页面底部的时候触发这个函数继续添加数据
        this.init2();
      }
    });
  },
  methods: {
    init() {
      //一开始就往list添加数据
      for (let i = 0; i < 100; i++) {
        this.list.push(i);
      }
    },
    init2() {
      for (let i = 0; i < 200; i++) {
        // 当滑动到底部的时候，继续触发这个函数
        this.list.push(i);
      }
    },
  },
};
</script>

这样的话，就可以做到数据懒加载啦，根据需要，逐步添加数据进去，减少一次性拉取所有数据，因为数据是非常庞大的，这样就可以优化很多性能了！