7：函数的防抖与节流
7.1 卡顿现象
原因：事件的触发非常频繁，每一次的触发都会引起回调函数的执行，如果回调函数内部有计算，且频繁触发，那么就会导致浏览器卡顿。
7.2 防抖
介绍：指频繁触发事件，但是只会执行最后一次的事件回调，之前的回调都会被取消。
技术：lodash中debounce方法封装了防抖的实现
7.3 节流
介绍：指频繁触发事件，但是事件回调在一定的时间内只会执行一次，把频繁触发变为少量触发。
技术：lodash中的throttle方法封装了节流的实现
7.4 三级联动的添加一级分类背景色的节流操作
import throttle from 'lodash/throttle'
//注意使用普通函数，箭头函数有this问题
changeIndex: throttle(function(index){
this.currentIndex = index
},50)
8：三级联动路由的跳转与传参
8.1 跳转
1.声明式路由导航：不能较好的完成路由跳转
存在问题：卡顿问题
原因：router-link标签它是一个组件，当循环遍历三级联动分类时，会在一瞬间创建很多router-link标签，当数据发生变化时，还涉及到模板解析、虚拟DOM、真实DOM等很多步骤，消耗内存很大，导致页面卡顿。
2.编程式路由导航：能够较好的完成跳转，但是不够优秀
存在问题：每一个a标签都绑定了对应的点击事件，会使点击事件很多。
3.编程式路由导航 + 事件委派：能够很好的完成路由跳转
原因：将所有的点击跳转事件都委派给统一的父节点来完成，只有一个回调。
8.2 传参（要求传递名字与对应id）
1.编程式路由导航 + 事件委派涉及的问题与解决方法
问题1：因为父节点中包含了较多的子节点（h3、dt、dl、a等），怎么区分点击的是a节点？
解决方法：给a标签添加自定义属性 :data-categoryName="c1.categoryName"，通过鼠标事件 event.target.dataset 去拿到对应的自定义属性并且判断是否是a标签（注意浏览器会把驼峰式自定义属性名改为非驼峰式 categoryName ==> categoryname）
问题2：怎么传递对应的id
解决方法：给三级a标签分别添加自定义属性 :data-category1Id、:data-category2Id、:data-category3Id进行区分
// 三级联动路由跳转
goSearch(event) {
// 解构出自定义属性
const { categoryname, category1id, category2id, category3id } = event.target.dataset;
// 整理参数
const location = { name: "search" };
const query = { categoryName: categoryname };
// 判断是否是 a标签
if (categoryname) {
if (category1id) {
query.category1Id = category1id;
} else if (category2id) {
query.category2Id = category2id;
} else {
query.category3Id = category3id;
}
}
// 整理参数
location.query = query
this.$router.push(location);
