一、防抖与节流

正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）

防抖（debounce）：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次

节流（throttle）：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

可以通过参考lodash官方文档（ www.lodashjs.com/ ）来查看它们的使用

 <li class="cart-list-con5">
            <a
              href="javascript:void(0)"
              class="mins"
              @click="handler('mins', -1, cart)"
              >-</a
            >
            <input
              autocomplete="off"
              type="text"
              minnum="1"
              class="itxt"
              :value="cart.skuNum"
              @change="handler('change', $event.target.value * 1, cart)"
            />
<!-- $event.target.value * 1  --> 如果是些 a * 1 不合理的数 * 1都会变为NaN
            <a
              href="javascript:void(0)"
              class="plus"
              @click="handler('add', 1, cart)"
              >+</a
            >
</li>
<script>
         //节流
handler: throttle(async function (type, disNum, cart) {
      /*
          type：为了区分是加是减还是直接变化
          disNum：+ 变化量（1） - 变化量（-1） input最终个数（不是变化量）
          cart：点击的是哪一个产品【身上有id】
        */
      switch (type) {
        case "add":
          disNum = 1;
          break;
        case "mins":
          //判断产品的个数大于1，才给服务器传递 -1
          //如果出现产品个数小于等于1，给服务器传递 0
          disNum = cart.skuNum > 1 ? -1 : 0;
          break;
        case "change":
          console.log(disNum);
          //用户如果输入的数据不合理，则给服务器传递0
          if (isNaN(disNum) || disNum < 0) {
            disNum = 0;
          } else {
            //考虑小数的情况
            disNum = parseInt(disNum) - cart.skuNum;
          }
          break;
      }
      //派发action
      try {
        await this.$store.dispatch("addToCart", {
          skuId: cart.skuId,
          skuNum: disNum,
        });
        //将有变动的数据再次整理发送请求
        this.getData();
      } catch (e) {
        alert(e.message);
      }
    }),
<script/>

复制代码

二、路由跳转与传递参数

开发的三级联动业务：

1：当你点击a标签的时候，会进行路由的跳转，将产品的名字与id传递给search模块—-（query） 2：点击搜索按钮的时候，用户输入进来的关键字，点击按钮的时候会通过params参数传递给search模块—–（params） 3：路由跳转（home->search）,两个地方，三级联动（typeNav）、Header组件（搜索按钮）

第一种 声明式路由跳转（不推荐使用）：

router-link是一个组件：相当于VueComponent类的实例对象，一瞬间 new VueComponent很多实例（1000+），很消耗内存，因此会导致卡顿

第二种编 程式导航跳转（也不推荐使用）：

同样需要给每个跳转的DOM对象身上绑定一个事件，个数过多的时候，很消耗内存

第三种编 程式导航+事件委派+自定义属性（推荐！）

自定义属性如果不会使用，建议去查看官方文档说明

      /*
        最好的解决方法：编程式导航 + 事件委派 + 自定义属性
        一个问题：点击a标签的时候，才会进行路由跳转【但怎么确定点击的一定是a标签】
        另一个问题：即使能确定点击的是a标签，但怎么区分是一级、二级还是三级
      */
      //解决第一个问题：给字节点中的a标签加上自定义属性
      let element = e.target;
      //节点中有一个属性dataset，可以获取节点的自定义属性和属性值（都是小写）
      let { categoryname, category1id, category2id, category3id } =
        element.dataset;
      //如果标签上有categoryname的一定是a标签
      if (categoryname) {
        //将传递的参数存好
        let location = { name: "search" };
        let query = { categoryname };
        //一级、二级、三级分类判断
        if (category1id) {
          query.category1id = category1id;
        } else if (category2id) {
          query.category2id = category2id;
        } else {
          query.category3id = category3id;
        }
        location.query = query;
        //合并参数
        if(this.$route.params){
          location.params = this.$route.params
          this.$router.push(location)
        }
      }
复制代码

三、三级联动相关性能优化

1.为什么要优化TypeNav三级联动性能

项目：home切换到search或者search切换到home，你会发现一件事情，组件在频繁的向服务器发请求，来获取三级联动的数据进行展示。

项目中如果频繁的向服务器发请求，很耗性能的，因此咱们需要进行优化。

2.为什么会频繁的向服务器发请求获取三级联动的数据

因为路由跳转的时候，组件会进行销毁的，所以跳转一次，就相当于重新生成一个VueComponet实例，然后就会重新挂载，发送请求

3.解决办法

只需要发一次请求，获取到三级联动的数据即可，不需要多次。 最终解决方案：在App.vue中发送请求

mounted() {
    //派发一个action||获取商品分类的三级列表的数据
    this.$store.dispatch("getCategoryList");
  },
复制代码

4.项目性能优化手段

v-if|v-show选择 按需加载 lodash、ant 防抖与节流 请求次数优化