vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单（过渡动画效果）+17.（优化）针对三级菜单联动进行优化，优化方向为减少查询】

文章目录

• 16.开发Search组件模块中的TypeNav商品分类菜单（过渡动画效果）
• 17.（优化）针对三级菜单联动进行优化，优化方向为减少查询

• 本人其他相关文章链接

16.开发Search组件模块中的TypeNav商品分类菜单（过渡动画效果）

重难点说明

1. 组件与vuex交互
2. 事件控制二三级分类列表的显示与隐藏
3. 优化高频事件触发处理: 利用lodash进行函数节流处理
4. 优化减小打包文件: 对lodash库实现按需引入
5. 解决快速移出后可能显示第一个分类的子分类列表的bug
6. 优化减少组件对象数量: 使用编程式导航代替声明式导航
7. 优化事件处理效率: 利用事件委托
8. 利用标签自定义属性携带动态数据
9. 控制一级列表的显示与隐藏
10. 一级列表显示隐藏的过渡效果
11. 优化请求执行的位置, 减少请求次数
12. 合并分类query参数与搜索的关键字params参数

要求：Home组件中三级菜单一直显示，而Search组件中初始进来隐藏，当鼠标划入则显示，鼠标移出则隐藏，另外三级菜单要有过渡动画效果。

过渡动画：前提组件|元素务必要有v-if|v-show指令才能进行过渡动画控制。

新增代码如下：Search组件中使用/

<template>
  <div>我是搜索页
    <TypeNav></TypeNav>
  </div>
</template>

TypeNav组件中使用@mouseleave和 @mouseenter对show属性显隐进行控制

<div @mouseleave="leaveIndex" @mouseenter="enterShow">
  <transition name="sort">
    <div class="sort" v-show="show">
    </div>
  </transition>
</div>
---------------------------------------------------------------------------
data() {
    return {
      show:true
    }
},
---------------------------------------------------------------------------  
//组件挂载完毕
mounted() {
    //当组件挂载完毕，让show属性变为false
    //如果不是Home路由组件，将typeNav进行隐藏
    if (this.$route.path != "/home") {
      this.show = false;
    }
}, 
---------------------------------------------------------------------------
methods: {
//当鼠标离开的时候，让商品分类列表进行隐藏
    leaveIndex() {
      this.currentIndex = -1;
      //判断如果是Search路由组件的时候才会执行
      if (this.$route.path != '/home') {
        this.show = false;
      }
    },
    //当鼠标移入的时候，让商品分类列表进行展示
    enterShow() {
      if (this.$route.path != '/home') {
        this.show = true;
      }
    }
  },
---------------------------------------------------------------------------  
//过渡动画的样式
//过渡动画开始状态（进入）
    .sort-enter {
      height: 0px;
}
// 过渡动画结束状态（进入）
    .sort-enter-to {
      height: 461px;
}
// 定义动画时间、速率
    .sort-enter-active {
      transition: all 0.5s linear;
}

注意點1：

问题：Search組件中使用三級联动菜单TypeNav需要引入吗？

答案：不需要，因为三級联动菜单TypeNav是注册的全局组件，可以直接使用。

注意點2：通过show属性控制三级菜单的显隐，设计思路是：初始化show：true -> 通过mounted()钩子函数判断当路由为非home组件时设置show = false，这样当进入Search组件时菜单会默认自动隐藏 -> 定义鼠标划入、离开的函数，进行显隐控制

注意點3：

问题：控制划入+划出的@mouseenter和@mouseleave应该放在哪一层上？

答案：也应该放在父层上，还是父类委派操作，同时添加路由路径逻辑判断控制show的属性。

注意點4：

问题：v-show属性应该放在哪一层上？

答案：应该放在“全部商品分类”标签的里面元素，而不是放在父类元素。因为如果放在父类元素错误效果是当进入Search组件时整个菜单就完全隐藏后续无法进行显示了。

正确代码请看，请注意v-show所在元素的位置

<div @mouseleave="leaveIndex" @mouseenter="enterShow">
        <h2 class="all">全部商品分类</h2>
        <!-- 过渡动画 -->
        <transition name="sort">
          <!--1级联动菜单-->
          <div class="sort" v-show="show">

正确效果如图

错误代码请看，请注意v-show所在元素的位置

<div @mouseleave="leaveIndex" @mouseenter="enterShow" v-show="show">
        <h2 class="all">全部商品分类</h2>
        <!-- 过渡动画 -->
        <transition name="sort">
          <!--1级联动菜单-->
          <div class="sort" >

错误效果如图

注意點5：使用动画效果，要使用标签/进行包裹，另外配合样式搭配使用

<transition name="sort">
...
</transition>

//过渡动画的样式
    //过渡动画开始状态（进入）
    .sort-enter {
      height: 0px;
    }
    // 过渡动画结束状态（进入）
    .sort-enter-to {
      height: 461px;
    }
    // 定义动画时间、速率
    .sort-enter-active {
      transition: all 0.5s linear;
    }

17.（优化）针对三级菜单联动进行优化，优化方向为减少查询

消耗资源场景：正常情况下查询list的接口放在TypeNav组件中，这样坏处是进入Home组件会请求一次，当点击跳转Search组件时Home组件销毁然而查询list的接口还会再次执行一次，也就是存在多次查询相同接口的场景。

优化方案：想办法减少或者只执行一次查询到处使用。优化方案把查询list的接口放在App.vue的mounted()方法中，因为App.vue只会执行一次，代码如下

把TypeNav的mounted()中的查询移到App.vue的mounted()中

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

问题1：能否把查询list接口方法这行放在main.js中，因为main.js也只执行一次。

答案：不能，因为main.js是个js文件，哪怕打印里面的this，控制台会输出underfine，而App.vue中的this指代的是组件实例，而只有组件实例才有$store的属性，所以只能放在App.vue中。

本人其他相关文章链接

1.vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单（过渡动画效果）+17.（优化）针对三级菜单联动进行优化，优化方向为减少查询】 2.vue尚品汇商城项目-day03【18.合并params和query参数（Header组件+TypeNav组件）】
3.vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
4.vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
5.vue尚品汇商城项目-day03【22.开发Floor组件】