Dat 3 

1 完成一级分类动态添加背景颜色

第一种解决方案：采用样式完成（可以的）

第二种解决方案：采用js完成

2 通过 js 控制二三级商品分类显示隐藏

最开始的时候，是通过 css 样式 display:none | block 显示与隐藏二三级商品分类

3 演示卡顿现象

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

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

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

4 函数的防抖与节流

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

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

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

6 三级联动组件的路由跳转的分析

三级联动用户可以点击的：一级分类、二级分类、三级分类，当你点击的时候

Home 模块跳转到 Search 模块，一级会把用户选中的产品（产品名字、产品ID）在路由跳转的时候，进行传递。

路由跳转：

声明式导航：router-link

编程式导航：push | replace

三级联动：如果使用声明式导航 router-link：可以实现路由的跳转与传递参数。

但是需要注意：出现卡顿现象。

router-link：可以一个组件，当服务器的数据返回之后，循环出很多的 router-link 组件【创建组件实例的】1000+

创建组件实例的时候，一瞬间创建1000+ 很耗内存，因此出现了卡顿现象。

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

8 复习

（1）商品分类的三级列表由静态变为动态模式【获取服务器数据：解决代理跨域问题】

（2）函数的防抖与节流【面试频率很高】

（3）路由的跳转：声明式导航（router-link组件）、编程式导航

编程式导航解决这个问题：自定义属性