1 防抖节流
正常:事件触发非常频繁,而且每一次的触发,回调函数都要去执行(如果时间很短,而回调函数内部有计算,那么很可能出现浏览器卡顿)
防抖:前面的所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发,只会执行最后一次
节流:在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发
防抖与节流的原理,通过JS实现【闭包 + 延迟器】
防抖:用户操作很频繁,但是只执行一次
节流:用户操作很频繁,但是把频繁的操作变为少量操作【可以给浏览器留有充裕的时间解析代码】
防抖:搜索功能----(_.debounce)
lodash插件:官网或者npm都可以下载
npm i --save lodash
//全部引入
// import _ from "lodash";
//按需引入,因为是默认暴露的,所以不加 { throttle }大括号了
import throttle from "lodash/throttle";
// //用es5写法--全部引入
// changeIndex:_.throttle(function(index){
// this.currentIndex = index;
// },50),
//用es5写法--按需引入(throttle别用箭头函数,可能出现上下文)
changeIndex: throttle(function (index) {
this.currentIndex = index;
}, 50),
handler:throttle( async function(type, disNum, cart){
//type区分三个元素
//disNum变化量和最终量
//cart产品id
switch (type) {
case "add":
disNum=1;
break;
case "minus":
disNum=cart.skuNum>1?-1:0
break;
case "change":
//输入非法【字母,汉字】或者负数
if(isNaN(disNum)||disNum<1){
disNum=0
}else{
//小数取证
disNum=parseInt(disNum)-cart.skuNum
}
break;
}
// console.log(disNum);
//派发请求
try {
await this.$store.dispatch('addOrUpadteShopCart',{skuId:cart.skuId,skuNum:disNum})
this.getData()
} catch (error) {
}
},800),
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入lodash:全部功能 -->
<script src="./lodash.js"></script>
</head>
<body>
<!-- 防抖--搜索 -->
<p>输入内容<input type="text"></p>
<script>
//lodash插件:里面封装了防抖和节流的业务【闭包+延迟器】
//lodash函数库对外暴露——函数
let input=document.querySelector('input');
input.oninput=_.debounce(function(){
console.log('请求');
},1000);
</script>
</body>
</html>
节流:计数器+1 ,轮播图多次点击切换(出现混乱错位现象),菜单的三级联动功能(防卡顿) ----(_.throttle);购物车减一时出现负数
<!-- 节流 -计数器在一秒内只能+1-->
<div>
<h1>计数器<span>0</span></h1>
<button>+</button>
</div>
<script>
let span = document.querySelector('span')
let button = document.querySelector('button')
let count = 0;
button.onclick = _.throttle(function(){
count++;
span.innerHTML = count
},1000)
</script>
2 函数或者组件的部分引入,不是全部
如:函数防抖与节流 按需加载
按需加载:对于loadsh插件,它里面封装的函数功能很多
import _ from lodash 相当于把全部功能引入进来,但是我们只是需要节流。
//全部引入
import _ from 'lodash';
//按需引入,因为是默认暴露的(module.exports = throttle;),所以不加 { throttle }大括号了
import throttle from "lodash/throttle";
// es6写法,没法用节流
// changeIndex(index) {
// this.currentIndex = index;
// },
// //用es5写法--全部引入
// changeIndex:_.throttle(function(index){
// this.currentIndex = index;
// },50),
//用es5写法--按需引入
changeIndex: throttle(function (index) {
this.currentIndex = index;
}, 50),
3 v-if|v-show
4 懒加载
路由和组件的常用两种懒加载方式:
1、vue异步组件实现路由懒加载
component:resolve=>(['需要加载的路由的地址',resolve])
2、es提出的import(推荐使用这种方式)
const HelloWorld = ()=>import('需要加载的模块地址')
const HelloWorld = ()=>import("@/components/HelloWorld")
component:HelloWorld
5 多次请求优化
像菜单组价,在home和search页来回切换时不断发送请求,且请求结果是一样的数据,这时可以放在APP根组件的mounte里,保存到store里
//通知vuex发请求,获取数据,存储于仓库中
//派发action
this.$store.dispatch("home/categoryList");
6 传参时如果不想传值给服务器,将置空改为undefined
如面包屑点击删除时的操作
removeCategoryName() {
//参数置空,getData没有必须要传入的参数,可带可不带,越少越好;
//所以将this.searchParams.categoryName = undefined;【即不向服务器传参】
// this.searchParams.categoryName = "";
// this.searchParams.category1Id='';
// this.searchParams.category2Id='';
// this.searchParams.category3Id='';
this.searchParams.categoryName = undefined;
this.searchParams.category1Id = undefined;
this.searchParams.category2Id = undefined;
this.searchParams.category3Id = undefined;
this.getData();
},
未完待续。。。。。