vue watch监听触发优化搜索框的性能防抖节流的比较
更新时间：2023年10月11日 11:07:09 作者：MRZYD
这篇文章主要为大家介绍了vue watch监听触发优化搜索框的性能防抖节流的比较,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
概要
- "实现搜索框防抖功能的方法"
- "搜索框防抖和节流的区别及应用场景"
- "如何优化搜索框的性能：防抖和节流的比较"
- "搜索框防抖技术的原理和实现方式"
- "提升搜索框响应速度的技巧：防抖和节流的应用"
实例
<template>
<div>
<el-input v-model="search" />
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
search: '',
timer:null
}
},
watch: {
search: {
handler (newVal, oldVal) {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
this.getGoods();
}, 1000)
},
deep: true
}
},
methods: {
getGoods(){
console.log('请求一次')
}
}
}
</script>扩充知识点
什么是防抖
防抖，即短时间内大量触发同一事件，只会执行一次函数，实现原理为设置一个定时器，约定在xx毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到xx毫秒内无第二次操作，防抖常用于搜索框/滚动条的监听事件处理，如果不做防抖，每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费。
什么是截流
防抖是延迟执行，而节流是间隔执行，函数节流即每隔一段时间就执行一次，实现原理为设置一个定时器，约定xx毫秒后执行事件，如果时间到了，那么执行函数并重置定时器，和防抖的区别在于，防抖每次触发事件都重置定时器，而节流在定时器到时间后再清空定时器
以上就是vue watch监听触发优化搜索框的性能防抖节流的比较的详细内容，更多关于vue watch监听触发防抖的资料请关注脚本之家其它相关文章！
相关文章
vue3.0 CLI - 2.1 - component 组件入门教程
这篇文章主要介绍了vue3.0 CLI - 2.1 - component 组件入门教程,本文主要的关注点就是组件，本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友可以参考下2018-09-09
vue element upload组件 file-list的动态绑定实现
这篇文章主要介绍了vue element upload组件 file-list的动态绑定实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了 Vue press 支持图片放大功能,本文通过代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
Vant是一个强大的移动端组件库,目前Vant 官方提供了 Vue 2 版本,Vue 3 版本和微信小程序版本,本文主要为大家介绍vue3中的vant组件引入使用的方法,希望对大家有所帮助2023-10-10
vue3中v-for报错'item'is of type'unknown'的
在写vue3+ts的项目,得到一个数组,需要循环展示,使用v-for循环,写完之后发现有个报错,接下来通过本文给大家介绍vue3中v-for报错 ‘item‘ is of type ‘unknown‘的解决方法,感兴趣的朋友一起看看吧2023-11-11
在 Vue.js 中,你可以通过多种方式将样式私有化,以确保样式只作用于特定的组件,避免全局污染,本文整理了一些常用的方法,希望对大家有所帮助2024-11-11
Electron+Vite+Vue3的组合为开发者提供了一个高效、灵活的跨平台桌面应用开发框架,下面这篇文章主要介绍了vue3+vite+electron构建项目的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-03-03
v-model 是 vue.js 提供的语法糖，根据不同的表单控件监听不同的事件，实现对表单控件的数据双向绑定。这篇文章主要介绍了vue 表单输入格式化中文输入法异常,需要的朋友可以参考下2018-05-05
本文给大家分享Vue.js实现实例搜索应用功能详细代码，非常不错，感兴趣的朋友参考下吧2017-08-08
这篇文章主要为大家介绍了富文本编辑器quill.js 开发之自定义插件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
最新评论