2024年前端最全如何在 Vue 中使用防抖和节流_vue中使用防抖和节流(3)，2024年最新面试官面试流程话术

最新推荐文章于 2024-08-07 10:17:22 发布

2401_84616922

最新推荐文章于 2024-08-07 10:17:22 发布

阅读量585

点赞数 26

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84616922/article/details/138773812

版权

程序员专栏收录该内容

106 篇文章 0 订阅

订阅专栏

总结

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

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 个步骤：

. 在**create()** 钩子里，创建实例后，立刻将防抖回调 debounce(event => {...}, 500) 赋值到 this.debouncedHandler 。
在输入框的 template 中给**v-on:input** 赋上 debouncedHandler ：<input v-on:input="debouncedHandler" type="text" />
最后，在卸载组件之前，在 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 — 这会导致防抖出现故障。