这里以搜索功能为例
监听边输入边搜索:@input
敲回车搜索 @keyup.enter.native=""
点击按钮搜索 @click
搜索性能优化:主要利用防抖和节流
防抖和节流:主要目的是为了降低高频事件触发,减少dom操作或请求次数,提升性能
通常高频事件:onscroll,onresize,keyup/keydown,mousemove
防抖:在固定时间内,如果有事件触发,则会再延长固定时间,直到固定时间内没有触发事件再做处理 例如:电梯和屏保。
节流:指定一个固定时间,无论是事件触发与,只要到了固定时间,都会触发。
第三方函数工具库:lodash
安装: npm i lodash
引入:import _ from ‘lodash’
//防抖
getList:_.debounce(function() {
this.getUserList()
},2000),
//节流
getList:_.throttle(function() {
this.getUserList()
},2000),
js 原生(可写全局方法):
export function _debounce(fn, delay) {
//防抖
var delay = delay || 200;
var timer;
return function() {
var th = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
timer = null;
fn.apply(th, args);
}, delay);
};
}
// 节流
export function _throttle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function() {
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function() {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}