1. 完成以及分类动态添加背景颜色 通过JS来完成
用到的知识： 事件委派。标签动态绑定类名
文章图片
文章图片
2. 节流与防抖 解决： 下载lodash插件； lodash函数库对外暴露 _函数（可百度搜索中文文档）
节流:在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发（用户操作很频繁，但是把频繁的操作变为少量操作相当于给 “浏览器有充裕的时间解析代码 ” ）
文章图片
防抖:前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发只会执行一次（用户操作很频繁，但是只执行一次） _.debounce()
文章图片
三级联动的节流
项目中node_modules已经有lodash, 按需引入，优化开发，不要全部引用
文章图片
函数写成这种形式，要注意不能写成箭头函数，不然this的指向会有问题。
3. 三级联动组件的路由跳转与传递参数
- 三级联动用户可以点击的:一级分类、二级分类、三级分类，当你点击的时候
- Home模块跳转到Search模块，一级会把用户选中的产品（产品的名字、产品的ID)在路由跳转的时候，进行传递。
（localhost8080/#/search?categoryName=对讲机&category3ld=62）
- 路由跳转:
1.声明式导航:router-link
2.编程式导航:push/replace
- 三级联动:如果使用声明式导航router-link，可以实现路由的跳转与传递参数。但是需要注意，出现卡顿现象。
- 出现卡顿现象原因：router-link:可以一个组件，当服务器的数据返回之后，循环出很多的router-link组件【创建组件实例的】创建组件实例的时候，一瞬间创建1000+ 十分耗内存的，因此出现了卡顿现象。
- 所以最好的解决方案是使用：编程时导航 + 事件委派
为什么使用事件委派：是因为如果给每一个 a标签 去添加一个点击事件，那么有成千个 a标签， 就意味着有成千个回调函数，那么就会对性能造成了影响。如果使用事件委派，那么只需要给其父节点绑定一个点击事件即可。
- 事件委派存在的问题
1 事件委派是把全部的子节点【h3、dt、dl、em】的事件委派给父亲节点，但是我们的需求是点击a标签的时候，才会进行路由跳转怎么能确定点击的一定是a标签
2 存在另外一个问题:即使你能确定点击的是a标签，如何区分是一级、二级、三级分类的标签。
- 【vue|Vue项目的记录（三）】对7的解决方法
使用自定义属性
文章图片
let element = event.target
这里显示element中的标签里的属性有个细节，他会变成小写，要注意
文章图片
文章图片
element.dataset点击有自定义属性的就会有出现自定义属性，可区分点击的是a标签而不是其他标签
element.dataset这个好像是与自定义属性有关的，之前js学的有点遗忘，要记得回去补充知识
运行的结果：
文章图片
如何区分是一级、二级、三级分类的标签？ 一样添加自定义属性
文章图片
完整示例代码
文章图片
推荐阅读
- vue|vue3.0 + element-plus + 上传图片到七牛云
- 区块链探索|[Near Protocol] Near开发Demo浅析-Gamble Game Near（二）（Dapp）
- 前端知识|Vue指令综合案例——汽车品牌管理
- vue|vue网络请求
- vue.js|为什么Vue（默认情况下）比React性能更好
- Vue|Vue组件详解
- Vue|Vue混入与插件
- Vue|Vue实例生命周期
- javascript|使用axios 请求库结合iview组件做登录页面