【day3】尚品汇

1. 完成一级分类动态添加背景颜色
   第一种解决方案：采用样式完成（可以的）

   .item:hover{
              background-color: skyblue;
              }
        

第二种解决方案：js

2. 通过JS控制二三级商品分类的显示与隐藏
   :style="{display:currentIndex==index?‘block’:‘none’

正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而且回调函数内部有计算，那么很可能出现浏览器卡顿）
节流：在规定的间隔时间范围内不会触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发
防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发 只会执行一次

4. 函数的防抖与节流
   节流：在规定的间隔时间范围内不会触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发
   防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发 只会执行一次

5. 完成三级联动的节流操作

6. 三级联动组件的路由跳转与传递参数
   三级联动用户可以点击的：一级分类，二级分类，三级分类，当你点击的时候
   Home模块跳转到Search模块，一级会把用户选中的产品（产品的名字，产品的ID）在路由跳转的时候，进行传递。
   路由跳转：
   声明式导航：router-link
   编程式导航：push|replace

三级联动：如果使用声明式导航 router-link,可以实现路由的跳转与传递参数
但是需要注意，出现卡顿

<router-link to="/search">{{ c1.categoryName }}</router-link>

router-link:可是一个组件，当服务器的数据返回之后，循环出很多的 router-link组件【创建组件实例】1000+
创建组件实例的时候，一瞬间创建1000+很耗内存，因此出现了卡顿现象
尝试一下点击事件

 <a @click="goSearch">{{ c3.categoryName }}---{{ index }}</a>
goSearch(){
   this.$router.push('/search')
  }

但是以上两种方式都不是最优的选择

解决方案

   <div class="all-sort-list2" @click="goSearch">
    >goSearch(){
    // 最好的解决方案：编程式导航 + 事件委派
    // 利用事件委派存在一些问题： 1：点击的一定是a标签？2：如何获取参数【1,2,3级分类的产品的名字】、id
 this.$router.push('/search')
}

存在一些问题：事件委派，是把全部的子节点【h3,dt,dl,em】的事件委派给父节点
1） 点击a标签的时候，才会进行路由跳转【怎么能确定点击的一定是a标签】
2）即使你能确定点击的是a标签，如何区分是一级、二级、三级分类的标签。

7. 完成三级联动路由跳转与传递参数