Vue项目的记录（三）

1. 完成以及分类动态添加背景颜色

通过JS来完成
用到的知识： 事件委派。标签动态绑定类名

2. 节流与防抖

解决： 下载lodash插件； lodash函数库对外暴露 _函数（可百度搜索中文文档）

节流:在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发（用户操作很频繁，但是把频繁的操作变为少量操作相当于给 “浏览器有充裕的时间解析代码 ” ）

防抖:前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发只会执行一次（用户操作很频繁，但是只执行一次） _.debounce()

三级联动的节流
项目中node_modules已经有lodash, 按需引入，优化开发，不要全部引用

函数写成这种形式，要注意不能写成箭头函数，不然this的指向会有问题。

3. 三级联动组件的路由跳转与传递参数

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

2. Home模块跳转到Search模块，一级会把用户选中的产品（产品的名字、产品的ID)在路由跳转的时候，进行传递。
   （localhost8080/#/search?categoryName=对讲机&category3ld=62）

3. 路由跳转:
   1.声明式导航:router-link
   2.编程式导航:push/replace

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

5. 出现卡顿现象原因：router-link:可以一个组件，当服务器的数据返回之后，循环出很多的router-link组件【创建组件实例的】创建组件实例的时候，一瞬间创建1000+ 十分耗内存的，因此出现了卡顿现象。

6. 所以最好的解决方案是使用：编程时导航 + 事件委派
   为什么使用事件委派：是因为如果给每一个 a标签 去添加一个点击事件，那么有成千个 a标签， 就意味着有成千个回调函数，那么就会对性能造成了影响。如果使用事件委派，那么只需要给其父节点绑定一个点击事件即可。

7. 事件委派存在的问题
   1 事件委派是把全部的子节点【h3、dt、dl、em】的事件委派给父亲节点，但是我们的需求是点击a标签的时候，才会进行路由跳转怎么能确定点击的一定是a标签
   2 存在另外一个问题:即使你能确定点击的是a标签，如何区分是一级、二级、三级分类的标签。

8. 对7的解决方法
   使用自定义属性
   
   let element = event.target
   这里显示element中的标签里的属性有个细节，他会变成小写，要注意
   
   
   element.dataset点击有自定义属性的就会有出现自定义属性，可区分点击的是a标签而不是其他标签
   element.dataset这个好像是与自定义属性有关的，之前js学的有点遗忘，要记得回去补充知识
   运行的结果：
   
   如何区分是一级、二级、三级分类的标签？ 一样添加自定义属性
   
   完整示例代码