2024年最全如何在 Vue 中使用 防抖 和 节流_vue中使用防抖和节流,2024阿里手淘前端面试题目

最后

推荐一些系统学习的途径和方法。

路线图

每个Web开发人员必备,很权威很齐全的Web开发文档。作为学习辞典使用,可以查询到每个概念、方法、属性的详细解释,注意使用英文关键字搜索。里面的一些 HTML,CSS,HTTP 技术教程也相当不错。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS:

html5知识

css基础知识

export default {
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();
},
};


如果你打开这个 demo,你会发现其实从用户角度来看,变化不大:你依旧可以像上一个 demo 中一样自由输入字符。


但有一个区别:只有在最后一次输入的 **`500ms`**之后,才会将新的输入值打印日志到控制台。这说明 防抖 在生效。


观察者 的 防抖实现 只需要 3 个简单步骤:


1. 在**`create()`** 钩子 里,创建 防抖回调,并将其赋值到实例上:**`this.debouncedWatch = debounce(..., 500)`。**
2. 在 观察者 回调**`watch.value() { ... }`**  中 传入正确的参数 调用 **`this.debouncedWatch()`**。
3. 最后,**`beforeUnmount()`** 钩子中 调用 **`this.debouncedWatch.cancel()`**,在卸载组件之前,取消所有还在 **pending** 的 防抖函数执行。


采用同样的方式,你可以对任意数据属性的 观察者 应用 防抖。然后就可以安全执行 防抖回调内部的一些比较重的操作,比如 网络请求、繁重的 DOM 操作,等等。  
  
  


### 2. 事件处理器 防抖


上面一节,我展示了如何对 观察者 使用 防抖,那么常规的事件处理器呢?


我们重用之前用户输入数据到输入框的例子,但这一次会给输入框加个 事件处理器。


像往常一样,如果你没有采取任何缓冲的措施,每当值被修改时,会被打印到控制台:



```

打开这个 demo,在输入框打几个字符。看看控制台:你会发现每次你输入的时候就会有日志被打印出来。

同样,如果你会执行一些比较重的操作(比如网络请求),可就不合适了。

对 事件处理器 使用 防抖,可以参考下面这个:

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
  created() {
    this.debouncedHandler = debounce(event => {
      console.log('New value:', event.target.value);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedHandler.cancel();
  }
};
</script>

打开 demo,输入一些字符。组件只有在最后一次输入的 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>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
  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. 总结

结尾

学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

html5

  • 23
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值