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监听触发防抖的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue进行数据可视化图表展示的实现示例
数据可视化是现代化的数据分析和展示方式,可以使数据更加直观、易于理解和传达,Vue作为一款流行的前端框架,提供了丰富的插件和工具来实现数据可视化图表展示,本文将介绍如何使用Vue和Echarts/D3.js来实现数据可视化图表展示,并提供示例代码和实际应用场景
2023-10-10
Vue3中使用vuedraggable拖拽实战教程
这篇文章主要介绍了Vue3中使用vuedraggable拖拽实战教程,文中通过示例介绍了vue3拖拽组件vuedraggable的使用demo，需要的朋友可以参考下
2023-06-06
Vue实现移除数组中特定元素的方法小结
这篇文章主要介绍了Vue如何优雅地移除数组中的特定元素,文中介绍了单个去除和批量去除的操作方法,并通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下
2024-03-03
Vite图片资源打包优化的实现
本文主要介绍了Vite图片资源打包优化的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
vue-cli之引入Bootstrap问题(遇到的坑,以及解决办法)
这篇文章主要介绍了vue-cli之引入Bootstrap问题(遇到的坑,以及解决办法),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue element-ui v-for循环el-upload上传图片动态添加、删除方式
这篇文章主要介绍了vue element-ui v-for循环el-upload上传图片动态添加、删除方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue3 Element-plus el-menu无限级菜单组件封装过程
对于element中提供给我们的el-menu组件最多可以实现三层嵌套，如果多一层数据只能自己通过变量去加一层，如果加了两层、三层这种往往是行不通的，所以只能进行封装，这篇文章主要介绍了Vue3 Element-plus el-menu无限级菜单组件封装,需要的朋友可以参考下
2023-04-04
详解Vue中如何进行分布式日志管理与日志分析
在现代应用程序中，日志是一项重要的功能，用于帮助开发人员和运维人员了解应用程序的行为并进行故障排除，本文将介绍如何在Vue应用程序中实现分布式日志管理和日志分析功能，感兴趣的可以了解一下
2023-06-06
vue实现宫格轮转抽奖
这篇文章主要为大家详细介绍了vue实现宫格轮转抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
Vue3实现图片放大镜效果
这篇文章主要为大家详细介绍了Vue3实现图片放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08