vue使用节流函数的踩坑实例指南

前言

一个常见的业务场景，我们要在input搜索框输入结束后，发送相关请求，获取搜索数据。频繁的事件触发会导致接口请求过于频繁。所以需要我们对此加以限制，来禁止不必要的请求，以免资源的浪费~

举一个???? 业务场景

概念：

关于防抖函数的介绍

关于addeventlistener

使用示例：

在vue中使用？

首先说一下之前的踩坑行为

下面的代码为简易版的一个场景

错误的使用方式

为什么错误？

源码层级分析

vue模板编译 的解析事件

总结: 实例初始化阶段调用的初始化事件函数initevents实际上初始化的是父组件在模板中使用v-on或@注册的监听子组件内触发的事件

vue的事件机制

vue的initstate中 调用了initmethods方法

initmethods中挂在methods方法到this上

划重点：

• 子组件$emit('input事件')
• 父组件接收事件
  

那么应该如何调用

分析执行过程

子组件触发input的行为  返回的始终是一个同一个函数体  防抖成功

类比于文章开始时介绍的addeventlistener

总结

到此这篇关于vue使用节流函数踩坑的文章就介绍到这了,更多相关vue节流函数踩坑内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！