Vue防抖和节流怎么使用
这篇文章主要介绍“Vue防抖和节流怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue防抖和节流怎么使用”文章能帮助大家解决问题。
1. 观察者 防抖
我们先从一个简单的组件开始,我们的任务是 将用户输入到 文本框中的文本 输出到控制台:
<template>
<inputv-model="value"type="text" />
<p>{{ value }}</p>
</template>
<script>exportdefault {
data() {
return {
value: "",
};
},
watch: {
value(newValue, oldValue) {
console.log("Value changed: ", newValue);
}
}
};
</script>
在 输入框 敲几个字符。每次输入时,值就会被 log 到控制台。
我们通过使用 观察者(watcher) 监听 value 数据属性 来实现了打印日志。但如果你想在 观察者的回调 中加入一个 使用 value 作为参数 的 GET 请求,那你应该不会期望太过频繁地发起请求。
我们来对 打印控制台日志 这个行为做一下 防抖。核心思想是创建一个 防抖函数,然后在 观察者 内部调用该函数。
我在这里选择了 'lodash.debounce' 的 防抖实现,但你可以自由选择喜欢的实现方式。
我们来将 防抖逻辑 应用到组件:
<template>
<inputv-model="value"type="text" />
<p>{{ value }}</p>
</template>
<script>
import debounce from"lodash.debounce";
exportdefault {
data() {
return {
value: "",
};
},
watch: {
value(...args) {
this.debouncedWatch(...args);
},
},
created() {
this.debouncedWatch = debounce((newValue, oldValue) => {
console.log('New value:', newValue);
}, 500);
},
beforeUnmount() {
this.debouncedWatch.cancel();
},
};
</script>
但有一个区别:只有在最后一次输入的 500ms 之后,才会将新的输入值打印日志到控制台。这说明 防抖 在生效。
观察者 的 防抖实现 只需要 3 个简单步骤:
在 create() 钩子 里,创建 防抖回调,并将其赋值到实例上:this.debouncedWatch = debounce(..., 500)。
在 观察者 回调 watch.value() { ... } 中 传入正确的参数 调用 this.debouncedWatch()。
最后,beforeUnmount() 钩子中 调用 this.debouncedWatch.cancel() ,在卸载组件之前,取消所有还在 pending 的 防抖函数执行。
采用同样的方式,你可以对任意数据属性的 观察者 应用 防抖。然后就可以安全执行 防抖回调内部的一些比较重的操作,比如 网络请求、繁重的 DOM 操作,等等。
2. 事件处理器 防抖
上面一节,我展示了如何对 观察者 使用 防抖,那么常规的事件处理器呢?
我们重用之前用户输入数据到输入框的例子,但这一次会给输入框加个 事件处理器。
像往常一样,如果你没有采取任何缓冲的措施,每当值被修改时,会被打印到控制台:
<template>
<inputv-on:input="handler"type="text" />
</template>
<script>
exportdefault {
methods: {
handler(event) {
console.log('New value:', event.target.value);
}
}
};
</script>
在输入框打几个字符。看看控制台:你会发现每次你输入的时候就会有日志被打印出来。
同样,如果你会执行一些比较重的操作(比如网络请求),可就不合适了。
对 事件处理器 使用 防抖,可以参考下面这个:
<template>
<inputv-on:input="debouncedHandler"type="text" />
</template>
<script>
import debounce from"lodash.debounce";
exportdefault {
created() {
this.debouncedHandler = debounce(event => {
console.log('New value:', event.target.value);
}, 500);
},
beforeUnmount() {
this.debouncedHandler.cancel();
}
};
</script>
输入一些字符。组件只有在最后一次输入的 500ms 之后,才会将新的输入值打印日志到控制台。防抖 再一次生效了!
事件处理器 的 防抖实现 只需要 3 个步骤:
1.在 create() 钩子 里,创建实例后,立刻将 防抖回调 debounce(event => {...}, 500) 赋值到 this.debouncedHandler 。
2.在输入框的 template 中 给 v-on:input 赋上 debouncedHandler :<input v-on:input="debouncedHandler" type="text" />
3.最后,在卸载组件之前, 在 beforeUnmount() 钩子中 调用 this.debouncedHandler.cancel() ,取消所有还在 pending 的 函数调用。
另一方面,这些例子应用了 防抖 的技术。然而,同样的方式可以以用于创建 节流函数。
3. 注意
你可能不理解:为什么不直接在 组件的 method 选项中创建 防抖函数,然后在 template 中调用这些方法作为事件处理器?
// ...
methods: {
// Why not?
debouncedHandler: debounce(function () { ... }}, 500)
}
// ...
这比在实例对象上创建 防抖函数 要简单的多。
例如:
<template>
<inputv-on:input="debouncedHandler"type="text" />
</template>
<script>
import debounce from"lodash.debounce";
exportdefault {
methods: {
// Don't do this!debouncedHandler: debounce(function(event) {
console.log('New value:', event.target.value);
}, 500)
}
};
</script>
这次不是在 created() 钩子 里创建 防抖回调了,而是将 防抖回调 赋给了 methods.debouncedHandler 。
你如果试过 demo,你会发现是有效果的!
问题是,组件使用 export default { ... } 导出的 options 对象,包括方法,会被组件实例重用。
如果网页中有 2 个以上的组件实例,那么所有的组件都会应用 相同 的防抖函数 methods.debouncedHandler — 这会导致防抖出现故障。
4. 总结
在 Vue 中,可以很轻松的对 观察者 和 事件处理器 应用 防抖 和 节流。
核心逻辑就是,在 created() 钩子 里,创建 防抖 或 节流 的回调,并赋值在实例上。
// ...created() {
this.debouncedCallback = debounce((...args) => {
// The debounced callback
}, 500);
},
// ...
A)然后在观察者内部调用实例上的防抖函数:
// ...watch: {
value(...args) {
this.debouncedCallback(...args);
},
},
// ...
B)或在 template 中设定一个事件处理器:
<template><inputv-on:input="debouncedHandler"type="text" /></template>
在这之后,每次调用 this.debouncedCallback(...args) ,就算执行频率非常高,内部的回调也能缓冲执行。
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码